vue实现简易音乐播放器


Posted in Vue.js onAugust 14, 2022

本文实例为大家分享了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.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 #Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 #Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 #Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 #Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 #Vue.js
You might like
php过滤html标记属性类用法实例
2014/09/23 PHP
php制作简单模版引擎
2016/04/07 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
js密码强度检测
2016/01/07 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
python select.select模块通信全过程解析
2017/09/20 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
一套中级Java程序员笔试题
2015/01/14 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
高一政治教学反思
2014/01/28 职场文书
高中数学教学反思
2014/01/30 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
企业读书活动总结
2014/06/30 职场文书
特种设备安全管理制度
2015/08/06 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
python创建字典及相关管理操作
2022/04/13 Python