uniapp实现微信小程序音频播放倒计时的功能，类似微信语音条

uniapp实现微信小程序音频播放功能

最近需要有个项目需要用到音频播放，第一个想到的是audio标签，但是查阅了uniapp官方文档，发现audio组件已经不维护了。
官网推荐使用uni.createInnerAudioContext api来实现音频播放。这篇文章最终实现了音频播放倒计时的功能,完整代码在文章最后。 一起来共同学习吧~

• 实现音频播放功能，通过点击播放按钮实现音频播放，关键代码如下：

<button @click="audioPlay">点击播放音频</button>

data() {
	return {
		audioForm:{
		//音频播放路径
		src:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
		}
	}
},
methods:{
	audioPlay(){
		const innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.autoplay = true;
		innerAudioContext.src = this.audioForm.src;
		innerAudioContext.onError((res) => {
			//如果音频没有正常播放
			console.log(res.errCode);
		})
	}
}

如果点击按钮音频没有正常播放，查看控制台res.errCode的值

如果res.errCode=10004时，请查看你的音频格式，有些音频格式是只支持安卓或ios的，安卓和ios都支持的格式有m4a、wav、mp3、aac。具体参考一下uniapp官网文档. 如果想进入页面时自动播放，把**audioPlay()**在onLoad()生命周期中调用就好了。

• 实现音频播放时，时间倒计时功能。类似于微信语音条。
  实现思路如下:
  在audioForm中添加两个变量，duration和times，分别用来记录倒计时和音频总长度。
  在audioPlay()中点击播放视频时保存音频总时间，以及在播放过程中，给倒计时重新赋值，并且用音频总时间-当前播放第几秒，完成倒计时的功能。

//音频开始播放时会调用以下函数,
innerAudioContext.onCanplay(() => {
	innerAudioContext.duration;
	setTimeout(() => {
		//保存总时长，这里需要用到定时器，让函数延迟执行，不然获取不到值
		//innerAudioContext对象中的duration和buffered代表音频总时长
		this.audioForm.times = innerAudioContext.duration.toFixed(0)
	}, 10)
})
//音频播放的过程中会调用以下函数
innerAudioContext.onTimeUpdate(() => {
	//innerAudioContext对象中的currentTime代表当前音频播放到第几秒了。
	//用总时长减去当前播放的到第几秒了,然后赋值给倒计时，就实现了倒计时的功能。
	this.audioForm.duration = this.audioForm.times - innerAudioContext.currentTime.toFixed(0)
})

• 完整代码如下：

	<view>
		<button @click="audioPlay">点击播放</button>
		<text v-if="audioForm.duration">音频播放倒计时:{{audioForm.duration}}</text>
	</view>

		data() {
			return {
				audioForm: {
					//音频路径
					src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
					//倒计时
					duration: '',
					//音频长度
					times: ''
				},
			}
		},
		methods: {
			//点击按钮实现音频播放倒计时的效果
			audioPlay() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = this.audioForm.src;
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				//音频刚开始播放时会调用以下函数
				innerAudioContext.onCanplay(() => {
					console.log(innerAudioContext)
					innerAudioContext.duration;
					setTimeout(() => {
						//保存总时长，这里需要用到定时器，让函数延迟执行，不然获取不到值
						//innerAudioContext对象中的duration和buffered代表音频总时长
						this.audioForm.times = innerAudioContext.duration.toFixed(0)
					}, 10)
				})
				//音频播放的过程中会调用以下函数
				innerAudioContext.onTimeUpdate(() => {
					//innerAudioContext对象中的currentTime代表当前音频播放到第几秒了。
					//用总时长减去当前播放的到第几秒了,然后赋值给倒计时，就实现了倒计时的功能。
					this.audioForm.duration = this.audioForm.times - innerAudioContext.currentTime.toFixed(0)
				})
				//音频播放异常时调用以下函数
				innerAudioContext.onError((res) => {
					console.log(res.errCode);
				})
			}
		}

以上就是通过uniapp中的uni.createInnerAudioContext api来实现音频播放时倒计时的功能实现过程以及思路啦，更多详细信息请移步链接: uniapp官方文档音频组件控制。

本文地址：https://blog.csdn.net/weixin_42529224/article/details/111933345