uniapp简单版语音播放

qq_2524963996

已于 2023-08-24 10:22:37 修改

阅读量1.1k

点赞数

文章标签： uni-app

于 2023-08-22 15:57:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44161703/article/details/132429773

版权

博客介绍了音频循环播放的实现方法，函数先检查循环次数，若不满足终止条件则创建音频上下文对象、设置资源链接并播放。监听播放结束事件，销毁对象释放资源，延迟后重新调用函数，减少循环次数。还提及后端传多个语音的播放问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mounted() {
		this.ScanAudio('http://118.178.137.235:88/ipoker.mp3', 3); // 开始播放音频
	},


ScanAudio(url, count) {
    // 递归终止条件：当循环次数小于等于 0 时，停止递归
    if (count <= 0) return;

    // 创建内部音频上下文对象
    var music = uni.createInnerAudioContext();
    
    // 设置音频资源链接
    music.src = url;
    
    // 开始播放音频
    music.play();

    // 监听音频播放结束事件
    music.onEnded(() => {
        // 销毁音频上下文对象，以释放资源
        music.destroy();
        
        // 在音频播放结束后，延迟一定时间后重新调用 ScanAudio 函数进行循环播放
        setTimeout(() => {
            // 递减循环次数，继续下一次播放循环
            this.ScanAudio(url, count - 1);
        }, music.duration * 1000); // 延迟时间等于音频时长乘以 1000 毫秒
    });
}

说明

当调用 ScanAudio(url, count) 时，它首先检查循环次数 count 是否小于等于 0。如果是，表示递归终止条件已满足，停止递归。
如果循环次数不小于等于 0，函数会创建一个内部音频上下文对象 music，然后设置该音频的资源链接为提供的 url。
调用 music.play() 开始播放音频。
监听 music.onEnded 事件，当音频播放结束时触发。在此事件处理程序中，会先销毁音频上下文对象以释放资源，然后根据音频的时长乘以 1000 毫秒（即延迟一段时间）重新调用 ScanAudio 函数，实现循环播放。循环次数减少 1，从而控制循环次数。

后端传给多个语音如何播放

<template>
	<view class="content">1212</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	mounted() {
		const audioUrls = ['http://118.178.137.235:88/ipoker.mp3', 'http://118.178.137.235:88/ipoker.mp3', 'http://118.178.137.235:88/ipoker.mp3'];
		// 开始按顺序播放音频
		this.playSequentialAudioWithFixedDelay(audioUrls, 0, 3);
	},
	methods: {
		playSequentialAudioWithFixedDelay(urls, currentIndex, delayInSeconds) {
			if (currentIndex >= urls.length) {
				return;
			}
			const music = uni.createInnerAudioContext();
			music.src = urls[currentIndex];
			music.play();
			music.onEnded(() => {
				music.destroy();
				setTimeout(() => {
					this.playSequentialAudioWithFixedDelay(urls, currentIndex + 1, delayInSeconds);
				}, delayInSeconds * 1000);
			});
		}
	}
};
</script>

<style>
/* 样式省略 */
</style>