vue實(shí)現(xiàn)簡易音樂播放器
更新時(shí)間：2022年08月14日 12:22:58 作者：我是一只小小魚~
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡易音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡易音樂播放器的具體代碼，供大家參考，具體內(nèi)容如下
先看效果
代碼中使用的ivewUI前端框架
使用的是font-awesome字體圖標(biāo) 需要先安裝 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: '萌萌噠天團(tuán)-帝都.mp3',
},
{
song: '文武貝-夜的鋼琴曲5.mp3',
},
{
song: '烏蘭托婭-花橋流水.mp3',
},
{
song: '許嵩-山水之間.mp3',
},
{
song: '張杰-三生三世.mp3',
}
],
songListhidden:false
}
},
// computed: { ///存在問題，未能 到底預(yù)期效果以換他方式created里實(shí)現(xiàn)
// 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: '已經(jīng)到頂了喔' })
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: '已經(jīng)到底了喔' })
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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)
本文主要介紹了vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue+Microapp實(shí)現(xiàn)微前端的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)以vite+vue3+Microapp為主應(yīng)用，以vue2+element為子應(yīng)用的微前端，感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-06-06
這篇文章主要介紹了Vue中android4.4不兼容問題的解決方法,需要的朋友可以參考下2018-09-09
解決ElementUI中tooltip出現(xiàn)無法顯示的問題
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue使用WebSocket模擬實(shí)現(xiàn)聊天功能
這篇文章主要介紹了vue使用WebSocket模擬實(shí)現(xiàn)聊天功能,通過創(chuàng)建node服務(wù)和server.js文件實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-08-08
vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實(shí)例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點(diǎn)擊相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
VUE實(shí)現(xiàn)token登錄驗(yàn)證
這篇文章主要為大家介紹了VUE實(shí)現(xiàn)token登錄驗(yàn)證,詳細(xì)記錄實(shí)現(xiàn)token登錄驗(yàn)證的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題(最新方法)
這篇文章主要介紹了vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題,通過將密碼輸入框的type設(shè)置為text，修改樣式上的顯示，來實(shí)現(xiàn)既可以讓瀏覽器不自動填充密碼，又可以隱藏密碼的效果，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)小購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
談?wù)勔騐ue.js引發(fā)關(guān)于getter和setter的思考
最近因?yàn)楣镜男马?xiàng)目決定使用Vue.js來做，但在使用的過程中發(fā)現(xiàn)了一個(gè)有趣的事情，因?yàn)榘l(fā)現(xiàn)的這個(gè)事情展開了一些對于getter和setter的思考，具體是什么下面通過這篇文章來一起看看吧，有需要的朋友們可以參考學(xué)習(xí)。2016-12-12