vue實現簡易音樂播放器
本文實例為大傢分享瞭vue實現簡易音樂播放器的具體代碼，供大傢參考，具體內容如下
先看效果
代碼中使用的ivewUI前端框架
使用的是font-awesome字體圖標 需要先安裝 npm install font-awesome –save
<template>
<Card style="width:100%">
<template #title >
<Icon type="ios-musical-notes"></Icon>
音樂播放器
</template>
<audio ref="audio" controls="controls" style="width:100%;" :preload="preload">
<source />
</audio>
<h4 style="width: 100%;height: 50px;line-height: 50px; text-align: center;">{{namesong}}</h4>
<div wrap style="width: 100%; height: 150px;line-height: 150px; text-align: center;">
<ButtonGroup shape="circle">
<Button type="info" title="上一首" size="large" @click="up(Indexsong)"><i class="fa fa-backward"></i> </Button>
<Button type="info" title="播放/暫停" size="large" @click="play(namesong,Indexsong)"><i :class="playButton"></i></Button><!--fa fa-pause-->
<Button type="info" title="下一首" size="large" @click="down(Indexsong)" ><i class="fa fa-forward"></i></Button>
<Button type="info" title="列表" size="large" @click="IssongListshowhide" ><i class="fa fa-th-list"></i></Button>
</ButtonGroup>
</div>
<Table :columns="columns" :data="songList" v-show="songListhidden" @click="IssongListshowhide"></Table>
</Card>
</template>
<script>
export default {
data () {
return {
optiontype:["up","play","down"],
preload:'auto',
Indexsong:0,
namesong: '',
playButton:'fa fa-play',
musicUrl:'',
columns: [
{
type: 'index',
title: '序號',
align: 'center',
width: 100,
render: (h, params) => {
return h(
'span',
params.index
)
}
},
{
title: '歌曲',
key: 'song'
},
{
title: '操作',
render: (h, params) => {
return h('div', [
h(
'Button',
{
props: {
type: 'info',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.play(params.row.song,params.index);
}
}
},
'播放'
)
])
}
}
],
songList: [
{
song: '金莎-星月神話.mp3',
},
{
song: '萌萌噠天團-帝都.mp3',
},
{
song: '文武貝-夜的鋼琴曲5.mp3',
},
{
song: '烏蘭托婭-花橋流水.mp3',
},
{
song: '許嵩-山水之間.mp3',
},
{
song: '張傑-三生三世.mp3',
}
],
songListhidden:false
}
},
// computed: { ///存在問題，未能 到底預期效果以換他方式created裡實現
// namesong:{
// // setter
// get() {
// console.log("get:"+)
// return this.songList[1].song;
// }
// ,
// set(newval) {
// console.log("set:"+newval)
// return newval;
// }
// }
// },
methods:{
//切換上一曲
up(index){
let vm = this;
if(index===0){
this.$Message.success({ title: '提示', content: '已經到頂瞭喔' })
return
}
vm.Indexsong=--index;
vm.playButton='fa fa-pause';
vm.namesong=vm.songList[vm.Indexsong].song;
console.log("Indexsong:"+vm.Indexsong+",namesong:"+vm.namesong)
let audioplay= this.$refs.audio//播放
vm.musicUrl= require("@/assets/Music/"+vm.namesong)
audioplay.src = vm.musicUrl;
audioplay.play();
},
//切換下一曲
down(index){
let vm = this;
if(index===vm.songList.length-1){
this.$Message.success({ title: '提示', content: '已經到底瞭喔' })
return
}
vm.Indexsong=++index;
vm.playButton='fa fa-pause';
vm.namesong=vm.songList[vm.Indexsong].song;
console.log("Indexsong:"+vm.Indexsong+",namesong:"+vm.namesong)
let audioplay= this.$refs.audio
vm.musicUrl= require("@/assets/Music/"+vm.namesong)
audioplay.src = vm.musicUrl;
audioplay.play();//播放
},
play(song,index){
let vm = this;
vm.Indexsong=index;
console.log("Indexsong:"+
vm.Indexsong+",song:"+song+",+playButton:"+vm.playButton)
if(vm.namesong===song){
if(vm.playButton==="fa fa-play"){
vm.playButton='fa fa-pause';
let audioplay= this.$refs.audio
vm.musicUrl= require("@/assets/Music/"+vm.namesong)
audioplay.src = vm.musicUrl;
audioplay.play();//播放
}else{
vm.playButton="fa fa-play";
this.$refs.audio.pause();//暫停
}
}else if(vm.namesong!=song){
console.log("song:"+song)
console.log("playButton:"+vm.playButton)
vm.playButton='fa fa-pause';
vm.namesong=song;
let audioplay= this.$refs.audio
console.log("namesong:"+vm.namesong)
vm.musicUrl= require("@/assets/Music/"+vm.namesong)
audioplay.src = vm.musicUrl;
audioplay.play();//播放
}
},
IssongListshowhide(){
let vm = this;
vm.songListhidden = !vm.songListhidden;
}
}
,
created(){
//賦值變量
this.namesong = this.songList[1].song;
this.Indexsong=1;
}
}
</script>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。