likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 75

前言

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

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

方案介绍

1.单文件模式

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

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

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

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

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毫秒。

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

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

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

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

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

同步播放

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

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();
    }
  },

异步播放

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

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

方案对比

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

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

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

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

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

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