前言

微信小程序开发-音频播放经验分享

前文已经对小程序开发中的音频开发及使用进行了简单介绍。

下面将项目开发过程中前后采用的两种音频处理方案继续探讨。

方案介绍

1.单文件模式

最初采用的方式是将用到的所有字符通过音频生成工具，拆分成单个的音频文件，使用时进行调用。

生成所有用到的字符音频。

播放时传入对应的文件名称即可。

js 复制代码

playAudio(id) {
    this.innerAudioContext.stop();
    var prefix = "audio/";
    var suffix = ".mp3";
    this.innerAudioContext.src = prefix + id + suffix;
    this.innerAudioContext.play();
  },

2.文件分割模式

将所有的音频文件整合到一个音频文件，然后通过seek(n)，在指定位置进行播放。

由于大多数按钮音效一般都低于0.5秒时长，因此只设置起始位置，播放从每个音效的起始位置开始，播放时长为按照字符长度进行设置，一般二个汉字默认为500毫秒，四个汉字默认1000毫秒。

将所有字符生成到一个文件里。

生成每个字符的起始位置和对应的播放时长,需要根据实际情况进行字符的测试，保证每个字符能够发音清晰。

传入指定字符，在数组中查询播放。

同步播放

可以进行前后音频播放，不会出现两个音频重叠的情况。

js 复制代码

playAudioByPos(id) {
    var that = this;
    var audio = this.data.audios.filter(t => t.key == id)[0];
    if (audio) {
      this.innerAudioContext.seek(audio.pos);
      this.innerAudioContext.play();
      //要实现顺序播放的话，需要停止总线程
      that.sleep(audio.duration);
      that.innerAudioContext.stop();
    }
  },

异步播放

前后播放音频时，会出现重叠。不适合需要播放多个的情况。

js 复制代码

 playAudioByPosAsync(id) {
    var that = this;
    var audio = this.data.audios.filter(t => t.key == id)[0];
    this.innerAudioContext.seek(audio.pos);
    this.innerAudioContext.play();
    setTimeout(() => {
      that.innerAudioContext.stop();
    }, audio.duration);
  },

方案对比

第一种方案：分开存放，管理起来比较方便，需要加入新的音频时只需生成对应的文件，放入即可。但整体文件的空间占用较大，对于小程序的包限制影响比较大，适合变化比较频繁的情况。

第二种方案：整合存放，但需要单独存储所需字符的具体位置和播放时长，发生改变时可能需要改动很多字符的起始位置。文件的空间占用较小，无需多次加载音频文件，适合变动不大的情况。

在实际使用时，可根据要求灵活选择。

至此，音频播放的内容已经全部分享完毕。

如有问题，欢迎评论区讨论。

下一篇将分享这几天小程序推广的一些心得（失败），恳请各位掘友指导。

微信小程序开发-音频开发两种方案分享

前言

方案介绍

方案对比