微信小程序音频处理audio 使用整理

原创
2021/06/04 17:49
阅读数 3.4K

一、微信小程序音频处理audio 使用整理

小程序中处理音频播放,两种方式

1.小程序的音频组件 audio 对应 
AudioContext = wx.createAudioContext(string id, Object this); (被放弃,不在升级)

2.使用 纯js处理,没有页面标签,支持背景播放 (推荐)

InnerAudioContext 实例,可通过 wx.createInnerAudioContext 接口获取实例。
注意,音频播放过程中,可能被系统中断,可通过 wx.onAudioInterruptionBegin、wx.onAudioInterruptionEnd事件来处理这种情况。
参考文档:

https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html

3. 背景音频:BackgroundAudioManager

wx.playBackgroundAudio()

4.实时音频/视频,直播

 

使用案例:

微信小程序音频(三)使用BackgroundAudioManager 播放音频并展示进度

 微信小程序 InnerAudioContext seek后 onTimeUpdate不触发-已解决

 微信小程序音频处理audio -自定义进度控制

 

二、使用InnerAudioContext 方式播放音频 案例(推荐)

 

wxml

<view>播放进度</view>

<view>总时长:{{duration}} s</view>
<view>当前时间:{{currentTime}} s</view>

<button type="primary" bindtap="playClick">播放</button>
<button type="warn" bindtap="stopClick">暂停</button>

js 

var audio;

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var _this = this;
    audio = wx.createInnerAudioContext();

    audio.onPlay(() => {
      console.info('开始播放');
    });
    //监听播放过程,进度处理
    audio.onTimeUpdate(() => {
      //console.info(audio.currentTime,audio.duration);
      _this.setData({
        currentTime: audio.currentTime,
        duration: audio.duration
      });
    });
    //播放结束
    audio.onStop(() => {
      console.info('播放结束');
    });
    //播放暂停
    audio.onPause(() => {
      console.info('播放暂停');
    });
    audio.src = 'http://music.jnqianle.cn/file/audio/46.mp3';

  },
  //播放操作
  playClick: function () {
    var _this = this;
    audio.autoplay = true;
    //判断是否是播放中
    if (audio.paused) {
      audio.play(); //播放
    } else {
      audio.pause(); //暂停
    }
  },
  //关闭
  stopClick: function () {
    audio.stop();
  }
})

三、使用 Audio组件 播放,这种使用简单,支持api少 (被放弃中)

wxml


<audio src="{{audioSrc}}" id="audioOne" loop="true"></audio>

<button type="primary" bindtap="playClick">播放</button>
<button type="warn" bindtap="stopClick">结束</button>

js


var audio = null;
Page({
  /**
   * 页面的初始数据
   */
  data: {
       audioSrc:'',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //创建组件对象,此模式开发放弃
    audio = wx.createAudioContext('audioOne', this);
  },
  //播放操作
  playClick: function () {
    console.info(audio);
    this.setData({
      audioSrc:"http://music.jnqianle.cn/file/audio/46.mp3"
    });
    audio.play();
  },
  //暂定
  stopClick: function () {
    audio.pause();
  }
})

 

更多:

 2021年4月小程序登录、用户信息相关接口调整处理

 wx.openDocument()微信小程序打开word文件不能转发/编辑 问题

 微信小程序Echarts 图表组件使用整理

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部