2023年7月11日发(作者：)

Vue实现⾳乐播放器好久没有听⾳乐了，最近想去听，发现很多歌曾经喜欢因为版权变灰⾊了。于是萌⽣了⾃⼰写个播放器项⽬。让听歌不再担忧那天不能再听了。以下是实现思路和过程。欢迎探讨~需求1、⾳乐播放暂停2、⾳乐切换3、⾳乐拖动跳段播放实现1、播放器内容初始化#页⾯加⼊audio标签# js部分# databox: undefined, # audio对象musicPath: '******', // mp3链接coverPath: '******', // 封⾯musicTitle: '', // 当前播放标题musicImg: '', // 当前播放封⾯list: [ //数据格式 { id: 1, name: '活该', url: 'HuoGai', cover: 'ChenYou', singer: '谌宥', time: '04:12' }...]# methods⽅法区加⼊初始化⽅法init() { = this.$ox = [0].url # 歌曲链接 // 绑定三个触发⽅法 // 当时长有变化时触发，由"NaN"变为实际时长也算 tionchange = function() { ('时长发⽣了变化') } // 当前数据可⽤是触发 lay = function() { ('已经可以播放了') } // 播放位置发送改变时触发。 update = function() { ('播放位置发送了变动') } // ⾳频播放完毕 d = function() { ('播放完毕，谢谢收听') } // ⾳频播放完毕 r = function() { ('加载出错！') }}// mounted 页⾯进⼊是完成初始化mounted() { ()},初始化结果2、对接audio属性controls 属性让audio控件进⾏了展⽰。但是由于外观和内容不是我们能随⼼进⾏控制的。所以我们需要独⽴去⼀个假的播放组件，去对接audio的相关属性。⾸先，对接时间# 页⾯加⼊

总时长：{{ duration }}

当前时长：{{ currentTime }}

# data 加⼊duration: undefined, # ⾳乐总时长currentTime: undefined, # 当前播放时长# methodupdateTime() { // 更新时间 const total = Time(on) const current = Time(tTime) on = `${}:${}` tTime = `${}:${}` itle = [].name + ' - ' + [].singer mg = ath + [].cover + '.jpg'}，formatTime(time) { // 格式化毫秒，返回String型分秒对象 // 有可能没获取到，为NaN if (!time) return { min: '00', sec: '00' } return { min: (time / 60).toString().padStart(2, '0'), sec: (time % 60).toString().padStart(2, '0') }},初始化init()⾥的变动⽅法，加⼊更新⽅法init() { = this.$ox = [0].url # 歌曲链接 // 绑定三个触发⽅法 // 当时长有变化时触发，由"NaN"变为实际时长也算 tionchange = function() { ('时长发⽣了变化') _Time() } // 当前数据可⽤是触发 lay = function() { ('已经可以播放了') } // 播放位置发送改变时触发。 update = function() { ('播放位置发送了变动') _Time() } // ⾳频播放完毕 d = function() { ('播放完毕，谢谢收听') } // ⾳频播放完毕 r = function() { ('加载出错！') }},时间数据对接完成对接进度条# 由于⽐较懒，所以暂时拿现成的进度条组件。# script 引进 element 滑块组件import { ElSlider } from 'element-plus'# components 引⼊局部组件components: { ElSlider }# data 加⼊sliderVal: 0, // 这个对接当前时长。sliderMin: 0,sliderMax: 0, // 这个对接总时长。# 页⾯加⼊# methodformatTooltip(val) { // 格式化毫秒数，由于组件提⽰为纯数字，所以这⾥需要将数字转化为我们所需要的的格式，string类型的。'03:45', const time = Time(val) return `${}:${}`},spliderSelect() { // 滑块松动后触发。更新当前时长， // 时长发⽣变动会init⾥的⽅法进⾏更新数据 tTime = Val}这⾥可以根据⾃⼰的组件进⾏变化。时间更新加⼊进度条更新updateTime() { const total = Time(on) const current = Time(tTime) on = `${}:${}` tTime = `${}:${}` // 值为 需要取整 Val = (tTime) itle = [].name + ' - ' + [].singer mg = ath + [].cover + '.jpg'},进度条对接效果实现播放暂停，上⼀⾸，下⼀⾸# 页⾯加⼊上⼀⾸{{ play ? '暂停' : '播放'}}下⼀⾸当前歌曲：{{ list[index].name }}# data 加⼊index: 0, # 当前播放的⾳乐素质索引play: false # 播放状态，true为正在播放# methodmusicPlay(flag) { switch (flag) { case 'pre': if ([ - 1]) { = ath + [ - 1].url + '.mp3' -= 1 } else { = ath + [ - 1].url + '.mp3' = - 1 } break case 'play': = ! break case 'next': if ([ + 1]) { = ath + [ + 1].url + '.mp3' += 1 } else { = ath + [0].url + '.mp3' = 0 } break }}到此，简单的播放功能已经实现了。简单的播放实现优化+美化列表播放去掉audio标签controls属性，不显⽰⾃带的控件（功能还在，隐藏了），使⽤列表的播放⽅式# script 引进 element 滑块组件import { ElTable} from 'element-plus'# components 引⼊局部组件components: { ElTable}# dataplayer: {} // 对象控制list谁在播放player: {} // 对象控制list谁在播放# 页⾯加⼊表格 # method 加⼊点击⽅法 handlerPlay(id) { () if (![id]) { // 没值触发新的播放 const i = dex(x => === id) = i = false } lay('play') },# musicPlay⽅法 重构musicPlay(flag) { switch (flag) { case 'pre': if ([ - 1]) { = ath + [ - 1].url + '.mp3' -= 1 } else { = ath + [ - 1].url + '.mp3' = - 1 } break case 'play': = ! // 对接控件 同步 列表⾥的控件 if ([[].id]) [[].id].play = // 新的歌曲播放 if ( && ![[].id]) = ath + [].url + '.mp3' break case 'next': if ([ + 1]) { = ath + [ + 1].url + '.mp3' += 1 } else { = ath + [0].url + '.mp3' = 0 } break } if ( && ![[].id]) { = {} [[].id] = {} [[].id].play = true } else { ? () : () }}

加⼊对接相关的组件,绑定对应的对接参数。样式这⾥就忽略了。初始化⽅法init加⼊连续播放，播放时切个继续播放，暂停时切歌保持暂停判断。tionchange = function() { _ ? _() : _() _Time() } // 当前数据可⽤是触发 lay = function() { _ ? _() : _() } // 播放位置发送改变时触发。 update = function() { _Time() } // ⾳频播放完毕 d = function() { _lay('next') ('播放完毕，谢谢收听') } // ⾳频播放完毕 r = function() { ('加载出错！') }实现了最终结果展⽰：最终效果

发布者：admin，转转请注明出处：http://www.yc00.com/web/1689068176a202552.html