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
},