您现在的位置是:网站首页> 编程资料编程资料
微信小程序实现播放音频功能_javascript技巧_
2023-05-24
361人已围观
简介 微信小程序实现播放音频功能_javascript技巧_
本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下
功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。
HTML:
data:{ isPlay: true, srcMic: 'zzzzz.mp3' } onLoad: function (t) { this.audioPlay(); }, //播放语音 yuyinPlay: function (e) { let that = this //创建内部 audio 上下文 InnerAudioContext 对象。 that.innerAudioContext = wx.createInnerAudioContext(); that.innerAudioContext.onError(function (res) { }) if ((that.data.srcMic == '') || (that.data.srcMic == undefined)) return; that.innerAudioContext.src = that.data.srcMic //设置音频地址 this.innerAudioContext.play(); //播放音频 }, //播放 audioPlay() { this.yuyinPlay(); this.setData({ isPlay: true }) }, // 停止播放 audioPause() { this.setData({ isPlay: false }) this.innerAudioContext.pause();//暂停音频 }, // 结束语音 end: function (e) { let that = this if ((that.data.src) || (that.data.src != undefined)) return that.innerAudioContext.pause();//暂停音频 }, onHide: function () { this.end();//暂停音频 }, onUnload: function () { this.end();//暂停音频 },.musicd { position: fixed; z-index: 9999; top: 10%; left: 4%; } .musicd image { width: 100rpx; height: 100rpx; z-index: 999; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- Vue3生命周期Hooks原理与调度器Scheduler关系_vue.js_
- React Diff算法不采用Vue的双端对比原因详解_vue.js_
- TypeScript 接口继承的具体使用_javascript技巧_
- 微信小程序实现弹出框提交信息_javascript技巧_
- Vue3 计算属性的用法详解_vue.js_
- 微信小程序实现弹出层禁止页面滚动_javascript技巧_
- vue+elementUI实现分页效果_vue.js_
- 微信小程序canvas实现手写签名_javascript技巧_
- 前端使用JSON.stringify实现深拷贝的巨坑详解_javascript技巧_
- 微信小程序自定义可滚动的弹出框_javascript技巧_
