这篇文章主要讲解了“基于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>

关于“基于vue框架怎样实现一个音乐播放器”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。如果想了解更多相关内容的文章，关注我们，群英网络小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript中事件冒泡机制如何理解？一文带你看懂

  今天给大家分享的是JavaScript中事件冒泡机制的内容，对于新手来说JavaScript事件冒泡机制比较难理解，因此下文有实例及详细的介绍供大家参考，感兴趣的朋友接下来跟随小编一起来了解一下。

• 用JS怎样做点击按钮出现图片的效果？

  用JS怎样做点击按钮出现图片的效果？想要实现这个效果，我们需要给按钮绑定点击事件，并指定一个事件处理函数，具体的实现代码和效果如下，对新手学习JavaScript的点击事件事件有一定的参考价值，需要的朋友可以了解看看，接下来就跟随小编来学习一下吧。

• Vue框架+Element UI怎样实现响应式导航栏

  element-ui怎样实现响应式导航栏，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• JavaScript正则表达式的用法是什么？

  JavaScript正则表达式的用法是什么？在实际的项目中，常常会使用到JavaScript正则表达式，对此这篇文章就给大家来分享一下JavaScript正则表达式的使用，对新手学习JavaScript正则表达式有一定的帮助，需要的朋友可以参考。

• 微信小程序中实现列表上下移动效果的代码是什么

  这篇文章主要为大家详细介绍了微信小程序实现列表项上移下移效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下