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

news/2025/2/16 2:45:53/

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

http://www.ppmy.cn/news/597247.html

相关文章

【工具】showdoc导出文档超时问题的解决方案

问题背景 当showdoc需要导出的文档较大时&#xff0c;导出可能会超时 问题分析 通过报错信息可以看出是导出超时&#xff08;超过100s的限制&#xff09; 在网上查找这个报错&#xff0c;大概意思就是php代码执行的超时时间设置为了100s&#xff0c;调整 PHP 的 max_execution…

qt怎么设置widget自动缩放

在Qt中&#xff0c;你可以使用布局管理来实现widget的自动缩放。布局管理允许你的界面在窗口大小改变时&#xff0c;保持元素的相对位置和大小。Qt提供了几种布局管理器&#xff0c;包括水平布局、垂直布局和网格布局。下面是如何使用布局管理来设置widget自动缩放的基本步骤&a…

前端图片上传发现图片倒置解决方案 图片镜像效果实现

图片倒置解决方案 前端使用canvas将颠倒的图片进行旋转矫正 图片镜像效果实现 通过scale调整方向即可。 scale(scaleX, scaleY)&#xff1a;通过在 x 轴乘以 scaleX、在 y 轴乘以 scaleY 来缩放图像。scaleX和 scaleY 的默认值都是 1.0。 通过以下设置可实现图片翻转 scale(…

关于文件上传 以及 图片视频回显的问题

<template><div><!-- 上传文件按钮 --><el-empty description" " :image-size"200"><el-button type"primary" click"uploadFileAdd">点击上传<i class"el-icon-upload el-icon--right"&…

文件上传功能-图像上传

传统上传 1.封装文件上传的接口 import request from /utils/request//上传图片 export const uploadImage(data)>request({url:/common/upload?typeimages,method:POST,data:data })2. <template><div><h1>广告图管理</h1><hr><br&…

使用XShell向服务器上传本地图片完整步骤解析

首先输入账号密码&#xff0c;登录XShell&#xff0c;然后点击菜单栏“新建按钮”&#xff1a; 弹出新建对话属性窗口&#xff0c;在窗口中输入会话名称和主机名&#xff0c;其中会话名称自己命名&#xff0c;主机名就填写连接的服务器的名称&#xff0c;比如我这里填写的是10.…

文件的上传(图片、PDF、视频)

提示&#xff1a;本文仅记录本人工作中遇到的难点与个人见解&#xff0c;仅供参考&#xff0c;如有问题请见谅。 目录 前言 一、创建UploadUtil工具类 二、需要在yml中定义上传到系统的路径 三、创建UploadControlle 前言 文件上传&#xff0c;也称为upload&#xff0c;是…