iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现播放音频功能
  • 573
分享到

微信小程序实现播放音频功能

2024-04-02 19:04:59 573人浏览 八月长安
摘要

本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。 html: &l

本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下

功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。

html:

<view class="musicd">
    <image src="/resource/images/mic1.png" wx:if="{{isPlay}}" bindtap="audioPause"></image>
    <image src="/resource/images/mic2.png" wx:else bindtap="audioPlay"></image>
</view>
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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现播放音频功能

本文链接: https://www.lsjlt.com/news/153699.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作