uniapp简单版语音播放

javascript 复制代码
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 毫秒
    });
}

说明

  1. 当调用 ScanAudio(url, count) 时,它首先检查循环次数 count 是否小于等于 0。如果是,表示递归终止条件已满足,停止递归。

  2. 如果循环次数不小于等于 0,函数会创建一个内部音频上下文对象 music,然后设置该音频的资源链接为提供的 url

  3. 调用 music.play() 开始播放音频。

  4. 监听 music.onEnded 事件,当音频播放结束时触发。在此事件处理程序中,会先销毁音频上下文对象以释放资源,然后根据音频的时长乘以 1000 毫秒(即延迟一段时间)重新调用 ScanAudio 函数,实现循环播放。循环次数减少 1,从而控制循环次数。

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

javascript 复制代码
<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>
相关推荐
HuYi_code1 小时前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张2 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921432 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082855 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
ღ᭄ꦿ࿐Never say never꧂7 小时前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
你真的可爱呀8 小时前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
2501_9151063214 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张1 天前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
草字1 天前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app
2501_915106321 天前
iOS 应用加固与苹果软件混淆指南,如何防止 IPA 被反编译与二次打包?
android·ios·小程序·https·uni-app·iphone·webview