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

 更新时间:2022年07月07日 09:06:56   作者:In Heaven  
这篇文章主要为大家详细介绍了微信小程序实现播放音频功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

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

相关文章

  • JS函数节流和函数防抖问题分析

    JS函数节流和函数防抖问题分析

    这篇文章主要介绍了JS函数节流和函数防抖问题分析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    这篇文章主要介绍了js焦点文字滚动效果,功能实现非常简单,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • JS中国标准时间转化为年月日时分秒'yyyy-MM-dd hh:mm:ss'的示例详解

    JS中国标准时间转化为年月日时分秒'yyyy-MM-dd hh:mm:ss'的示例详解

    这篇文章主要介绍了JS中国标准时间转化为年月日时分秒‘yyyy-MM-dd hh:mm:ss‘的相关知识,通过示例代码介绍了,Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间),需要的朋友可以参考下
    2024-02-02
  • IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

    IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

    最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,查阅相关资料找到可以使用ie自带的setCapture和releaseCapture来解决,需要的朋友可以参考下
    2016-10-10
  • Web Uploader文件上传插件使用详解

    Web Uploader文件上传插件使用详解

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。这篇文章主要为大家详细介绍了Web Uploader文件上传插件使用方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript(js)设置默认输入焦点(focus)

    JavaScript(js)设置默认输入焦点(focus)

    常常会在回复和引用里使用此功能,即单击回复或引用,如让输入焦点出现在留言输入框中,如果使用锚来定位,输入焦点就不能激活了,需要了解的朋友可以参考下
    2012-12-12
  • js实现消灭星星(web简易版)

    js实现消灭星星(web简易版)

    这篇文章主要为大家详细介绍了js实现web简易版的消灭星星,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js实现上传图片及时预览

    js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-05-05
  • 一步一步教你写淡入淡出带注释的图片轮播插件(一)

    一步一步教你写淡入淡出带注释的图片轮播插件(一)

    抽空写了个类似的效果,做了一定程度的封装,虽然也只能勉强算个轻量级原生小插件吧,但还是分享出来,并做一步一步的教程,希望能给有需要的朋友一些帮助吧。
    2010-10-10
  • layer.confirm点击第一个按钮关闭弹出框的方法

    layer.confirm点击第一个按钮关闭弹出框的方法

    今天小编就为大家分享一篇layer.confirm点击第一个按钮关闭弹出框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论