uni-app中实现音乐播放器

uni-app中实现音乐播放器

1、主要利用的是uni-app中提供的uni.createInnerAudioContext()来进行实现；

2、代码示例

（1）主页面代码展示

（2）utils中util.js文件代码

function fixedZero(val) {
    return val * 1 < 10 ? `0${val}` : val;
}

const formatTime = (time) =>  {
    const minutes = 60;
    const m = Math.floor(time / minutes);
    const s = Math.floor(time % 60);
    return `${fixedZero(m)}:${fixedZero(s)}`;
}

（3）components中player-animation文件夹player-animation.vue文件代码

（4）播放器列表弹窗代码

3、实现也面向效果展示

（1）播放器

（2）播放器弹窗

4、实现该功能过程所遇到的问题总结

（1）当一首歌曲播完之后，进度条不更新问题，在网上查看到的方法都是说：该问题是存在的一个bug，解决的方案是我们再代码中要主动的调用paused()方法

this.timers = setTimeout(() => {
    console.log(this.musicPlayCtx.paused);
}, 200);

（2）当点击暂停播放后，音乐从头播放的问题，解决方案：利用seek()方法使其跳转到指定位置

 this.musicPlayCtx.seek(this.musicCurrentTime + 1);

（3）音乐播放器的地址，含有中文名称，在模拟器上面可以正常播放，手机上面不可以，解决方案：需要将该地址进行编码，编译成编译器可以识别地址

this.currentSrc = encodeURI(mediaUrl+ this.musicDetail.bsmb007);

5、以上代码可以直接粘贴复制到项目即可使用