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

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

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

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

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

赞 (0)

相关推荐

  • 微信小程序实现播放音频

    微信小程序实现播放音频

    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 wxml: <!-- 语音 --> <view wx:if="{{content.mp3.length > 0 }}">   <view class='audio' bindtap='musicStart'>     <view class='audio_btn'>       <image src='/img/btn_play3.png' cla

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

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

    目录 1.录音 1.1 案例 2.音频播放控制 2.1 案例 小程序继承了微信强大的语音处理功能,提供了录音.音频播放控制和背景音乐等功能,它们的功能不同,但有相似性. 1.录音 小程序提供了wx.startRecord(Object object)开始录音.wx.stopRecord()停止录音和RecorderManager录音管理器等接口对录音功能进行控制.因为RecorderManager录音管理器包含前两个接口的功能,所以这里只介绍RecorderManager. 接口 功能和用途 R

  • 微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,

  • 微信小程序page的生命周期和音频播放及监听实例详解

    微信小程序page的生命周期和音频播放及监听实例详解

    一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------onload()') /** * 监听音乐播放 */ wx.onBackgroundAudioPlay(function() { console.log('onBackgroundAudioPlay') }), /** * 监听音乐暂停 */ wx.onBackgroundAudioPause(func

  • 微信小程序多音频播放进度条问题

    微信小程序多音频播放进度条问题

    真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}

  • IOS中微信小程序播放缓存的音频文件的方法

    很多时候我们都想把数据预先缓存到本地,节省带宽.但是最近在处理微信小程序播放缓存到本地的音频文件的时候,遇到一些小问题,然后对于安卓和IOS需要采用不同的播放策略. 首先,如果哪怕用audio标签来播放在线的音频文件,假如服务端没有实现断点续传,IOS是无法播放的,这个需要注意. 对于缓存在小程序的音频(wx.saveFile(OBJECT)保存的音频),IOS只能通过播放背景音乐的接口播放,其它播放方法都没有成功实践,而对于安卓,内部 audio 上下文 innerAudioContext 对

  • 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    本文介绍了微信小程序的开发,主要包括图片.录音.音频播放.音乐播放.视频.文件,具体如下: 图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到. 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'],

  • 微信小程序 audio音频播放详解及实例

    微信小程序 audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序获取音频时长与实时获取播放进度问题

    首先在没有播放音频之前,居然拿不到总时长 但是在播放之后也需要设置setTimeout来获取 所以在监听音频播放进度更新事件中获取.顺便获取当前播放进度 按照官方的写法 audioPlayed: function () { myAudio.play() setTieout(() => { myAudio.onTimeUpdate(() => { console.log(myAudio.duration) //总时长 console.log(myAudio.currentTime) //当前播放

  • 微信小程序实现音频文件播放进度的实例代码

    问题描述 在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案 首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进度和进度条的时间显示. .wxml中(播放进度结构的代码): <view class="content-play-progress"> <text>{{play.currentTime}}</text> <view> <slider a

随机推荐