uniapp：音乐播放器_uniapp中实现全局的背景音乐

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

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);
			}
		},
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

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