uniapp音乐播放器

uniapp   2025-01-21 11:51   104   0  

创建audioManager.js作为全局播放管理工具,代码如下

// 创建一个全局的音频管理对象,用于存储音频相关状态和方法
const audioManager = {
    // 背景音频管理器实例
	// #ifdef H5
		bgAudioManager: uni.createInnerAudioContext(),
	// #endif
	// #ifdef APP-PLUS
		bgAudioManager: uni.getBackgroundAudioManager(),
	// #endif
    // 当前音频播放状态,true表示播放中,false表示暂停
    isPlaying: false,
    // 当前音频的相关信息,例如标题、作者、封面等,可根据实际需求扩展
	currentIndex: 0,
    currentAudioInfo: {
        musicTitle: '',
        musicImgPath: '',
        musicFilePath: '' ,
		musicDuration: 0
    },
	currentDuration: 0,
	playType: 0, // 默认 0 播放1 2 暂停
	timingDs: 0,
	timing: 0,
	timingIndex: 0,
	// 定时关闭
	timingArr: [
		{title: '60分钟', value: 3600},
		{title: '45分钟', value: 2700},
		{title: '30分钟', value: 1800},
		{title: '15分钟', value: 900},
		{title: '1分钟-测试', value: 60},
		{title: '关闭', value: 0},
	],
	// 音乐列表
	musicArr: [],
	loopType: 0, // 循环模式 0 单曲循环 1 列表循环
    // 初始化音频管理器,设置一些默认的监听事件等
    init() {
        this.bgAudioManager.onPlay(() => {
            this.isPlaying = true;
			this.playType = 1;
            // 可以在这里添加其他逻辑,比如更新页面上的播放状态图标等
        });
        this.bgAudioManager.onPause(() => {
            this.isPlaying = false;
			this.playType = 2;
            // 相应页面状态更新逻辑
        });
        this.bgAudioManager.onStop(() => {
            this.isPlaying = false;
			this.playType = 0;
            // 可能的清理或重置逻辑
        });
        this.bgAudioManager.onEnded(() => {
            // this.isPlaying = false;
			// this.playType = 0;
            // 比如自动播放下一首等逻辑(需进一步实现)
			if(this.loopType == 0) { // 单曲循环
				audioManager.play(this.currentAudioInfo)
			} else { // 列表循环
				if (this.currentIndex == this.musicArr.length - 1) {
					this.currentIndex = 0;
				} else {
					this.currentIndex ++;
				}
				audioManager.play(this.musicArr[this.currentIndex])
			}
        });
		this.bgAudioManager.onTimeUpdate(() => {
		  // 获取当前播放进度,单位为秒
		  this.currentDuration = this.bgAudioManager.currentTime > 0 ? this.bgAudioManager.currentTime : this.currentDuration;
		  // this.progressPercent = (this.currentTime / this.duration) * 100;
		  // console.log('当前播放进度:', this.currentTime);
		});
    },
    // 播放音频方法,传入音频信息对象
    play(audioInfo) {
        // this.currentAudioInfo = audioInfo;
		console.log("进来了~1")
		this.currentDuration = 0;
		this.currentAudioInfo = {
			musicTitle: audioInfo.musicTitle,
			musicImgPath: audioInfo.musicImgPath,
			musicFilePath: audioInfo.musicFilePath,
			musicDuration: audioInfo.musicDuration
		}
        this.bgAudioManager.title = audioInfo.musicTitle;
        this.bgAudioManager.coverImgUrl = audioInfo.musicImgPath;
        this.bgAudioManager.singer = audioInfo.musicTitle;
        this.bgAudioManager.src = audioInfo.musicFilePath;
        this.bgAudioManager.play();
    },
	play1() {
		console.log("进来了~2")
		let audioInfo = this.currentAudioInfo;
		this.bgAudioManager.title = audioInfo.musicTitle;
		this.bgAudioManager.coverImgUrl = audioInfo.musicImgPath;
		this.bgAudioManager.singer = audioInfo.musicTitle;
		this.bgAudioManager.src = audioInfo.musicFilePath;
		this.bgAudioManager.seek(this.currentDuration);
	    this.bgAudioManager.play();
	},
    // 暂停音频播放
    pause() {
        this.bgAudioManager.pause();
    },
    // 停止音频播放并重置相关状态
    stop() {
        this.bgAudioManager.stop();
        this.isPlaying = false;
        this.currentAudioInfo = {
            musicTitle: '',
            musicImgPath: '',
            musicFilePath: '' ,
            musicDuration: 0
        };
		this.currentDuration = 0;
		this.playType = 0;
		this.musicArr = [];
		this.currentIndex = 0;
		clearInterval(this.timingDs)
    },
	// 定时关闭
	timeOutBtn(val,inx) {
		this.timing = val;
		this.timingIndex = inx;
		if (this.timing == 0) {
			clearInterval(this.timingDs)
			return;
		}
		clearInterval(this.timingDs)
		this.timingDs = setInterval(() => {
			if (this.timing > 0) {
				this.timing --
			} else {
				clearInterval(this.timingDs)
				audioManager.stop();
				this.timingDs = 0;
				this.timing = 0;
				this.timingIndex = 0;
			}
		},1000)
	},
	// 更新循环模式
	loopTypeBtn() {
		this.loopType = this.loopType == 0 ? 1 : 0;
		if (this.loopType == 0) {
			uni.showToast({
			    title: '已切换为单曲循环',
			    icon: 'none',
			    duration: 2000
			});
		} else {
			uni.showToast({
			    title: '已切换为列表循环',
			    icon: 'none',
			    duration: 2000
			});
		}
	},
	// 更新当前音乐列表
	upListBtn(arr,index) {
		this.musicArr = arr;
		this.currentIndex = index;
	},
	// 上一首
	preBtn() {
		if (this.currentIndex == 0) {
			uni.showToast({
			    title: '已经第一首了',
			    icon: 'none',
			    duration: 2000
			});
			return;
		}
		this.currentIndex --;
		audioManager.play(this.musicArr[this.currentIndex])
	},
	// 下一首
	nextBtn() {
		if (this.currentIndex == this.musicArr.length - 1) {
			uni.showToast({
			    title: '已经最后一首了',
			    icon: 'none',
			    duration: 2000,
			});
			return;
		}
		this.currentIndex ++;
		audioManager.play(this.musicArr[this.currentIndex])
	},
};

// 初始化音频管理器
audioManager.init();

// 导出音频管理对象,方便在其他页面引入使用
export default audioManager;

在需要使用播放器的页面,引入

import audioManager from '@/common/audioManager.js';

就可以使用播放器管理工具了

博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。