uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能

官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥问题

data中的变量:showPlaybackRate: false,
<!-- 倍速弹出层 -->
	<u-popup :show="showPlaybackRate" @close="closePlaybackRate" @open="openPlaybackRate" :round="10">
	<scroll-view scroll-y style="height: 100%;">
		<view class="content" :style="'transform:translateY(' + translateY + 'px);'" :animation="animate">
			<view class="header">
				<view class="title">
					倍速选择
				</view>
				<view class="right" @click="closePlaybackRate">
					<u-icon name="close" color="#000000" size="20"></u-icon>
				</view>
			</view>
	
			<view class="rate-listBox">
				<view class="rate-list" @click="handleRate(0.5)">
					0.5倍速
				</view>
				<view class="rate-list" @click="handleRate(1)">
					1.0倍速
				</view>
				<view class="rate-list" @click="handleRate(1.5)">
					1.5倍速
				</view>
				<view class="rate-list" @click="handleRate(2.0)">
					2.0倍速
				</view>
			</view>
		</view>
	
	</scroll-view>
	</u-popup>

点击弹出层倍速切换的方法:

// 倍速播放
//this.bgAudioMannager可以通过两种方法获取,一个支持后台播放,具体可以参考官网,我是用的uni.createInnerAudioContext()
handleRate(type) {
	let that = this
	// // #ifdef H5
	// 	this.bgAudioMannager = uni.createInnerAudioContext()
	// // #endif
	// // #ifndef H5
	// 	this.bgAudioMannager = uni.getBackgroundAudioManager()
	// // #endif
	// 0.5倍速
	that.bgAudioMannager.pause()
	if (type == 0.5) {
		that.bgAudioMannager.playbackRate = 0.5
		that.rateText = '0.5X'
	} else if (type == 1.0) {
		that.bgAudioMannager.playbackRate = 1.0
		that.rateText = '1.0X'
	} else if (type == 1.5) {
		that.bgAudioMannager.playbackRate = 1.5
		that.rateText = '1.5X'
	} else {
		that.bgAudioMannager.playbackRate = 2.0
		that.rateText = '2.0X'

	}
	//查资料有的说的是播放和设置倍速不能同时,要不很大可能就没效果,所以用了个定时器,但有的还是没效果,不知道为啥,官网没查到具体问题
	setTimeout(res => {
		that.bgAudioMannager.play()
	}, 2000)
	// #endif
	that.playStatus = true
	that.showPlaybackRate = false
},
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐