uniapp录音播放功能

在这里插入图片描述
ui效果如上。
播放就开始倒计时,并且改变播放icon,另外录音则停止上一次录音。
播放按钮(三角形)是播放功能,两竖是暂停播放功能。

	const innerAudioContext = wx.createInnerAudioContext();
	export default{
		data(){
			return{
				recordingList:[],
				playIndex:null,//播放、暂停标识
				recordingTime:null,//倒计时
				copyIndex:null,//显示倒计时标识
			}
		},
		onLoad(option) {
			this.init()
		},
		onHide() {
			this.recordingInit()
			innerAudioContext.stop()//后退、后台页面停止音频,用销毁destroy重新进来onError会报错-1
		},
		onUnload() {
			this.recordingInit()
			innerAudioContext.stop()
		},
		methods:{
			//初始化列表,上拉下拉根据项目做
			init(){
				this.recordingList = []
				this.getRecordingList()
			},
			//获取订单录音列表
			getRecordingList(){
				let list = [
					{
						download_url:'',
						call_time_duration:13,//录音时长
						call_time_duration_copy:13,//复制录音时长,倒计时要用
					}
				]
				this.recordingList = list
			},
			//播放
			recordingPlay(item,index){
				if(this.playIndex != index){
					this.playIndex = index
					if(this.copyIndex != index){//判断是继续播放还是播放另外一个,播放另外一个重新赋值
						this.copyIndex = index
						item.call_time_duration_copy = JSON.parse(JSON.stringify(item.call_time_duration))
					}
					clearInterval(this.recordingTime)
					//即便ios开启静音模式,也可以播放
					wx.setInnerAudioOption({
						obeyMuteSwitch: false
					})
					innerAudioContext.src = item.download_url
					innerAudioContext.play();
					//监听错误
					innerAudioContext.onError((res) => {
						console.log('监听错误',res)
						this.recordingInit()
						innerAudioContext.stop()
					});
					//监听播放结束
					innerAudioContext.onEnded((res) => {
						this.recordingInit()
						item.call_time_duration_copy = JSON.parse(JSON.stringify(item.call_time_duration))
					});
					this.recordingTime = setInterval(()=>{
						if(item.call_time_duration_copy <= 0){
							clearInterval(this.recordingTime)
						}else{
							item.call_time_duration_copy--;
						}
					},1000)
				}
			},
			//暂停
			recordingPause(){
				this.recordingInit()
			},
			//播放初始化
			recordingInit(){
				this.playIndex = null
				innerAudioContext.pause();
				clearInterval(this.recordingTime)
			}
		}
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值