微信小程序实现音频播放

废话不多说直接上代码，亲测可用

Page({data: {isPlay: false,},onLoad() {this.audioPlay()},//创建语音示例进行播放createAudio(e) {//创建内部 audio 上下文 InnerAudioContext 对象。this.innerAudioContext = wx.createInnerAudioContext();// 发生错误触发this.innerAudioContext.onError(function (res) {})//设置音频地址this.innerAudioContext.src = "https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3"},//播放audioPlay() {this.createAudio();//播放音频this.innerAudioContext.play();//设置当前播放按钮状态切换this.setData({isPlay: true})},// 停止播放audioPause() {//设置当前播放按钮状态切换this.setData({isPlay: false})//暂停音频 this.innerAudioContext.pause();},// 结束音频end: function (e) {//暂停音频 this.innerAudioContext.pause();},onHide: function () {// 结束音频this.end();},onUnload: function () {// 结束音频this.end();},
})

也可以直接封装在工具函数中进行播放

    //创建内部 audio 上下文 InnerAudioContext 对象,音频对象放在顶部，防止多个音频一块播放const innerAudioContext = wx.createInnerAudioContext();module.exports = {// 音频播放audioPlay(url = "https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3") {innerAudioContext && innerAudioContext.pause();// 发生错误触发innerAudioContext.onError(function (res) {})//设置音频地址innerAudioContext.src = url;innerAudioContext.play();}}```

微信小程序实现音频播放相关推荐

微信小程序录音+音频播放（解决ios无法音频播放问题）
微信小程序录音+播放 1.创建全局变量 const audioManager = wx.getRecorderManager(): const innerAudioContext = wx.creat ...
微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...
微信小程序全局音频播放，实现分析
1. 需求分析育儿柚道小程序中有针对育儿教育提供的音频课程,主要包含读书.读文的音频内容. 1.1 功能需求课程音频:包含课程音频的地方有三处课程卡片,包含在 scrollview 中的试听内容 ...
微信小程序：音频播放器
由于产品需求,需要做一个自定义音频播放器,现在也差不多做完了,接下来呢,给大家分享一下,大家先来看看效果图哦~ 这里呢,我选择的是 wx.createInnerAudioContext 这个方法,大家 ...
简单实现微信小程序音乐音频播放的功能
效果图: 1)获取歌曲详情页的数据从每日推荐列表点击各歌曲跳转到歌曲详情页的时候,需要携带歌曲的id,在路由中把歌曲的id传到歌曲详情页的页面中使用(在wxml文件中通过data-id的形式把id传 ...
微信小程序实现音频播放，带有点击上一首和下一首的功能
1.注册音频的Api const innerAudioContext = wx.createInnerAudioContext(); 2.需要用到数据 exhibitList: [], //资源列表a ...
微信小程序简易音频播放器（wx.getBackgroundAudioManager()）
开发工具:微信开发者工具源代码(百度网盘:)链接: 提取码:ldb9 注意:如果点击播放没反应,或者爆红,则需要更换js中的视频地址第一步.首先要在app.json里设置: "requi ...
android获取小程序音频时长,最新微信小程序获取音频时长与实时获取播放进度...
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...

微信小程序实现音频播放

微信小程序实现音频播放相关推荐

最新文章

热门文章