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+iview实现文件上传
Nov 17 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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 分页类实现代码
2009/12/03 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python3判断IP地址的方法
2021/03/04 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
物流管理应届生求职信
2013/11/07 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
出国留学计划书
2014/04/27 职场文书
催款函怎么写
2015/06/24 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
电工生产实习心得体会
2016/01/22 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
德劲DE1108畅想
2021/04/22 无线电
Java实现简易的分词器功能
2021/06/15 Java/Android
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers