uniapp音频的播放和暂停问题

在写需求的时候遇到了一个小难点，要实现switch组件控制语音播报的开关，花了不少时间来解决，现在记录一下。

一、实现功能

申请扬声器权限，收款成功后语音自动播报收款金额，

开的时候播放语音，关的时候关闭语音播放。

二、使用步骤

1.代码

参考文档：https://uniapp.dcloud.io/api/media/audio-context.html#createinneraudiocontext
代码如下（示例）：

<template><view class="pages"><view class="sknotice"><uni-list border-full><view><view class="uni-list"><view class="uni-list-cell uni-list-cell-pd" v-for="(sktz,index) in gzhtz" :key="index"><uni-list-item :border="false" :title="sktz.tz" note="通过商家助手公众号接受收款通知" /><switch @change="switch1Change" /></view><view class="uni-list-cell uni-list-cell-pd" v-for="(sky,index) in skyy" :key="index"><uni-list-item :border="false" :title="sky.yy" note="收款成功时语音播报收款金额" /><switch @change="switch2Change" /></view></view></view></uni-list></uni-section></view></view>
</template><script>//必须独立出来写在script内，然后通过methods里面的控制方法来实现
const innerAudioContext = uni.createInnerAudioContext(); //引用组件
innerAudioContext.autoplay = false
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';//音频用的官方的，可以参考官方文档
innerAudioContext.onPlay(() => {console.log('开始播23213放');
});
innerAudioContext.onStop(()=> {console.log('2222')
})
innerAudioContext.onError((res) => {console.log(res.errMsg);console.log(res.errCode);
});import {gzhtz,skyy} from '@/src/sknotice.js'export default {data() {return {gzhtz: gzhtz,skyy: skyy,}},methods: {switch1Change: function(e) {console.log('switch1 发生 change 事件，携带值为', e.detail.value)},//如果放在里面，会造成没运行一次，就会从switch2Change开始一直循环判断，会实现音频循环播放switch2Change: function(e) {console.log('switch2 发生 change 事件，携带值为', e.detail.value)if(e.detail.value==true){console.log('开始播放', innerAudioContext)innerAudioContext.play()} else {console.log('结束播放')innerAudioContext.stop()}}},beforeDestroy () {innerAudioContext = null}}
</script><style>.sknotice {background-color: #ffffff;margin-top: 20upx;}
</style>

2.mock数据

代码如下（示例）：

export const gzhtz = [{tz:'公众号通知'},// {tznode:'公众号通知'},]
export const skyy = [{yy:'收款语音播报'},// {yynode:'公众号通知'},]

总结

以上就是今天要讲的内容，

uniapp音频的播放和暂停问题相关推荐

vue3 + uni-app 封装音乐播放插件
1.初始化一个音乐实例 let AUDIO = '' export const initAudio = function (url) {AUDIO = uni.createInnerAudioCont ...
iOS 9音频应用播放音频之ios9音频基本功能
iOS 9音频应用播放音频之ios9音频基本功能在iOS 9音频应用开发中最为简单和常用的就是AVFoundation框架中的AVAudioPlayer类.虽然AVAudioPlayer类不能播放网 ...
UE4-（蓝图）第二十五课音频的播放
一..将音乐源文件拖到context的文件夹下.注意,虚幻引擎当前支持导入未压缩的小端字节16位wav文件(支持各种采样率,推荐采样率为44100 Hz或22050 Hz). 二.可以将导入的音乐直接 ...
uniapp - [全端兼容] 音乐列表播放与切换歌曲，点击列表播放 mp3 wav 音乐文件（支持点击播放与暂停，图标切换 / 流畅的切换音频、暂停保留歌曲及恢复功能等详细教程）
前言网上教程都太乱了,各种不兼容.功能缺陷等问题,我们很难对示例进行改造. 本文站在新手角度,实现了 uniapp 全平台兼容,歌曲音乐列表点击播放与暂停.切换歌曲等功能(音乐列表多个音频切换), ...
html javascript 音频、视频、 mp3 、mp4 的播放、暂停、重新播放、获取音频时长、视频自动全屏播放
html javascript 音频.视频. mp3 .mp4 的播放.暂停.重新播放.获取音频时长视频 https://www.bilibili.com/video/BV1WE411o7Ft?fr ...
H5多媒体（用面向对象的方法控制视频、音频播放、暂停、延时暂停）
视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...
Android 入门第九讲01-音频（本地音乐播放，暂停，继续播放，获取播放时间，快进到指定位置，变速播放，播放data/data/目录下的音频文件，播放网络歌曲）
Android 入门第九讲01-音频(本地音乐播放,暂停,继续播放,获取播放时间,快进到指定位置,变速播放,播放data/data/目录下的音频文件,播放网络歌曲) 准备 1.储存在raw文件夹 2. ...
关于微信、QQ语音消息，语音电话的时候控制应用音频播放以及暂停
最近项目中有这样的需求,要求在用户使用QQ或微信在录制或播放语音消息的时候可以自动暂停后台的音频播放,完毕后可以恢复播放. Android是多任务系统,Audio系统是竞争资源,Android2.2之 ...
uni-app 音频android只能播放一次
原因: uni.createInnerAudioContext需要重新获取我的错误写法是export default上面直接声明了 var innerAudioContext = uni.creat ...

uniapp音频的播放和暂停问题

uniapp音频的播放和暂停问题

一、实现功能

二、使用步骤

1.代码

2.mock数据

总结

uniapp音频的播放和暂停问题相关推荐

最新文章

热门文章