uniApp 小程序使用createInnerAudioContext

1、获取音频的时长:

_self.innerAudioContext.onPlay(() => {
					console.log('开始播放');

					_self.showPalyView = true; //播放的进度条和按钮显示出来
					_self.imgageSrc = playImg; //音乐播放和暂停按钮的背景图片

					console.log("timelong : ", _self.innerAudioContext.duration);
					// 必须。不然也获取不到时长
					setTimeout(() => {
						_self.innerAudioContext.duration); 
						_self.durationAudio = _self.innerAudioContext.duration;
					}, 10)
				});

_self.innerAudioContext.duration; 
 setTimeout(() => {
                        _self.innerAudioContext.duration); 
                        _self.durationAudio = _self.innerAudioContext.duration;
                    }, 10)

先调用一次:_self.innerAudioContext.duration 相当于初始化一次 然后使用延时在获取一次。才能拿的到duration;

并且需要在onCanplay  onPlay这两个回调中的一个调用以保证音频是准备完成的。

 

2、onTimeUpdate 拿当前进度

直接在onTimeUpdate中的回调中拿不到当前的进度。需要获取当前进度需要用:

_self.innerAudioContext.onTimeUpdate((res) => {
					console.log("time : ", _self.innerAudioContext.currentTime);
					_self.percentAudio = (_self.innerAudioContext.currentTime / _self.durationAudio) * 100;


				});

在这个 onTimeUpdate中使用 _self.innerAudioContext.currentTime才是当前播放的进度。

 

3、使用方法

1、初始化

	this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.playAudioCallBack();

2、监听回调,(调用一次)

playAudioCallBack: function() {
				//音频播放事件的回调

				// innerAudioContext.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';
				//_self.innerAudioContext.src = itemSelect.url;

				_self.innerAudioContext.onPlay(() => {
					console.log('开始播放');

					_self.showPalyView = true; //播放的进度条和按钮显示出来
					_self.imgageSrc = playImg; //音乐播放和暂停按钮的背景图片

					console.log("timelong : ", _self.innerAudioContext.duration);
					// 必须。不然也获取不到时长
					setTimeout(() => {
						console.log("timelong 2 : ", _self.innerAudioContext.duration); // 401.475918
						_self.durationAudio = _self.innerAudioContext.duration;
					}, 10)
				});

				_self.innerAudioContext.onCanplay(function(res) {

				});
				_self.innerAudioContext.onPause(function(res) {
					console.log("onPause : ", res);
				})
				_self.innerAudioContext.onStop(function(res) {
					console.log("onStop : ", res);
				})
				_self.innerAudioContext.onWaiting(function(res) {
					console.log("onWaiting : ", res);
				})
				_self.innerAudioContext.onTimeUpdate((res) => {
					console.log("time : ", _self.innerAudioContext.currentTime);
					_self.percentAudio = (_self.innerAudioContext.currentTime / _self.durationAudio) * 100;


				});
				_self.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});

				_self.innerAudioContext.onSeeking(function(res) {
					console.log("seeking : ", res);
				});
				_self.innerAudioContext.onEnded(function(res) {
					console.log("end : ", res);
					_self.percentAudio = 100;

					_self.innerAudioContext.stop();

					_self.showPalyView = false;

					itemSelect.select = false;

				})
			}

4‘使用的时候改变这个就可以

_self.innerAudioContext.src = itemSelect.url;

改变_self.innerAudioContext.src 就可以播放另外一个音频

音频播放完成之后,不更换其他音频,需要继续播放使用_self.innerAudioContext.play();

其他更多方法请看官网介绍。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值