功能要求：全局音乐播放，可以上一首，下一首，暂停，播放。

1、mixins

export default {data() {return {audio: null, // 音频对象playlist: [{url: require('../static/1.mp3')}, {url: require('../static/2.mp3')}, {url: require('../static/3.mp3')}, {url: require('../static/4.mp3')}], // 播放列表currentIndex: 0, // 当前播放的歌曲索引loopMode: 'list', // 循环模式（'single'表示单曲循环，'list'表示列表循环）is_bf: false,}},methods: {playAudio(src) {// 创建音频对象if(!this.audio){console.log('注册');this.audio = uni.createInnerAudioContext();}this.audio.src = src;// 监听音频播放结束事件this.audio.onEnded(() => {this.nextAudio();});// 监听音频播放错误事件this.audio.onError((err) => {console.error('音频播放出错：', err);});// 开始播放音频this.audio.play();this.is_bf = true},pauseAudio() {if (this.audio) {this.audio.pause();this.is_bf = false;}},resumeAudio() {if (this.audio) {this.audio.play();this.is_bf = true;}},nextAudio() {this.audio.destroy();this.audio = null;console.log('销毁');if (this.currentIndex === this.playlist.length - 1) {// 如果是最后一首歌曲，根据循环模式判断下一曲if (this.loopMode === 'single') {this.playAudio(this.playlist[this.currentIndex].url);} else if (this.loopMode === 'list') {this.currentIndex = 0;this.playAudio(this.playlist[this.currentIndex].url);}} else {// 播放下一首歌曲this.currentIndex++;this.playAudio(this.playlist[this.currentIndex].url);}},prevAudio() {this.audio.destroy();this.audio = null;console.log('销毁');if (this.currentIndex === 0) {// 如果是第一首歌曲，根据循环模式判断上一曲if (this.loopMode === 'single') {this.playAudio(this.playlist[this.currentIndex].url);} else if (this.loopMode === 'list') {this.currentIndex = this.playlist.length - 1;this.playAudio(this.playlist[this.currentIndex].url);}} else {// 播放上一首歌曲this.currentIndex--;this.playAudio(this.playlist[this.currentIndex].url);}},},
}

2、music组件

<template><view class="music_box df-aic-jusb"><view class="df-aic"><image src="../../static/img/43.png" mode="" class="icon"></image><view class="right"><view class="fsz-26 fw-b u-line-1">周杰伦，天涯过客</view><view class="fsz-22 u-line-1">张韶涵</view></view></view><view class="df-aic"><image src="../../static/img/39.png" mode="" class="icon2" @click="playPrevAudio"></image><image src="../../static/img/42.png" mode="" class="icon2" @click="playSelectedAudio(is_bf)" v-if="!is_bf"></image><image src="../../static/img/41.png" mode="" class="icon2" @click="playSelectedAudio(is_bf)" v-else></image><image src="../../static/img/40.png" mode="" class="icon2" @click="playNextAudio"></image></view></view>
</template>
<script>export default {mounted() {},methods: {playSelectedAudio(is) {if(!this.audio){this.currentIndex = 0;const audioSrc = this.playlist[this.currentIndex].url;this.playAudio(audioSrc);}else{if(!is){this.resumeAudio()}else{this.pauseAudio()}}},playNextAudio() {if(!this.audio){this.playSelectedAudio()}else{this.nextAudio();}},playPrevAudio() {if(!this.audio){this.playSelectedAudio()}else{this.prevAudio();}},},}
</script><style scoped lang="scss">.music_box {width: 690rpx;height: 88rpx;background: rgba(37,52,89,0.8);border-radius: 10rpx;border: 1rpx solid #FFFFFF;margin: 30rpx auto 30rpx;padding: 0 20rpx;.right{width: 320rpx;}.icon{width: 64rpx;height: 64rpx;margin-right: 20rpx;border-radius: 10rpx;}.icon2{width: 30rpx;height: 30rpx;margin-left: 38rpx;}.fsz-22{color: #8D9BB9;}}
</style>

1、mixins中的playlist自行实现接口获取数据。
2、H5，APP已测试可用