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

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.5that.rateText = '0.5X'} else if (type == 1.0) {that.bgAudioMannager.playbackRate = 1.0that.rateText = '1.0X'} else if (type == 1.5) {that.bgAudioMannager.playbackRate = 1.5that.rateText = '1.5X'} else {that.bgAudioMannager.playbackRate = 2.0that.rateText = '2.0X'}//查资料有的说的是播放和设置倍速不能同时，要不很大可能就没效果，所以用了个定时器，但有的还是没效果，不知道为啥，官网没查到具体问题setTimeout(res => {that.bgAudioMannager.play()}, 2000)// #endifthat.playStatus = truethat.showPlaybackRate = false
},

uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能相关推荐

uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的播放
实现读书软件的听书功能,适配app,小程序,h5 实现效果展示功能带你包括: 章节,倒计时,上一章,下一章,播放,暂停,倍速: uniapp官方uni.createInnerAudioContext( ...
WoShop多商户直播电商系统APP+小程序+H5全开源无加密商城源码
WoShop多商户直播电商系统APP+小程序+H5全开源无加密商城源码随着多商户直播电商系统的市场走向兴盛,不止直播电商系统的使用越来越广泛,寻求多商户直播电商系统源码的人也越来越多.但源码市场混乱 ...
uni-app 实现 fullpage 组件（适用于微信小程序,h5等）
uni-app 实现 fullpage 组件(适用于微信小程序,h5等) 业务需求. 本文github 源码地址 1.组件 src/components/FullPage/index.vue < ...
省钱兄游戏陪玩小程序APP源码uniapp前端源码适配支持（APP+小程序+H5）
开源代码是用户端uniapp静态部分源码,提供学习使用使用hbuilder导入即可运行,目前适配小程序,安卓,IOS,H5 游戏类型,我的信息,我的要求,立即找大神编辑,我想玩的游戏,我想找,其他 ...
uni-app实现上传图片并显示【跨平台开发教程uniapp教程（米饭科技-app小程序h5源码）】
目录: uni-app上传图片并显示实现代码源码获取方法: 会员学习群: uni-app上传图片并显示实现代码你可以使用uniapp内置的上传图片组件,然后使用img标签来显示上传后的图片. ...
校园圈子系统-游戏陪玩系统+派单+社交+多人聊天室-源码部署-APP小程序H5
陪玩+语音房系统的发展前景近年来,陪玩+语音房系统成为了广大游戏玩家的热门话题这种系统通过提供线上游戏陪玩的服务使得玩家可以在虚拟世界中找到真正的伙伴,进行愉快的游戏体验. 与此同时,陪玩+语音房系 ...
陪玩APP小程序H5，一站式搭建，后台须知1
超全整理｜《App/小程序合规指南》
7月22日,中央网信办.工业和信息化部.公安部.国家市场监管总局四部门在京召开会议,启动2020年App违法违规收集使用个人信息治理工作.会议强调,2020年治理工作将在去年基础上,进一步加大整治工作 ...
uniapp中的分享功能实现(APP,小程序，公众号)
uniapp中的分享功能实现(APP,小程序,公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信.QQ.微博的分 ...

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

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

uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能相关推荐

最新文章

热门文章