JavaScript 播放多条音频与延迟播放

古城微笑少年丶 2023-06-11 11:25 4阅读 0赞

这里笔者用到一个很实用的音频播放库，[howler.js][] , 这个音频库支持多种格式的音频播放，并提供了丰富的音频播放功能，详细可以参考其官网：[https://howlerjs.com][howler.js]。

本文主要用它封装一个实用的音频播放小模块，主要实现多音频播放，以及多音频播放时每条音频延时播放，可以用于一些特定的业务场景，例如游戏场景。代码如下：

audio-play.js

import { Howl, Howler } from 'howler';
    
    const audioConf = {
        preload: true, //预加载
        autoPlay: true, //自动播放
        volume： 1 //音量: 0-1声音正常，如果倍数放太大，会加剧噪音
    }
    
    export default class AudioPlay {
      static play(audioList) {
        if (!audioList.audio.length) {
          return;
        } else {
          const howl = new Howl({
            preload: audioConf.preload,
            src:  [audioList.audio[0]],
            autoPlay: audioConf.autoPlay,
            volume: audioConf.volume,
          });
    
          if(!audioList.delay.length) {
            howl.play();
            howl.on('end', () => {
              console.log(`${audioList.audio[0]}播放完毕！`);
              audioList.audio.splice(0, 1);
              AudioPlay.play(audioList);
            })
          } else {
            setTimeout(() => {
              howl.play();
            }, audioList.delay[0]);
            audioList.delay.splice(0, 1);
            howl.on('end', () => {
              console.log(`${audioList.audio[0]}播放完毕！`);
              audioList.audio.splice(0, 1);
              AudioPlay.play(audioList);
            })
          }
        }
      };
    }

使用例子：

import AudioPlay from './audio-play'; //如果是将代码写在html文件中，需要加文件后缀.js
    
    const audioList = {
        audio: [1.wav, 2.wav, 3.wav], //音频文件，这里的文件可以是本地的也可以是一个音频网址
        delay: [100, 1000, 2000]  //延迟播放时间
    }
    
    AudioPlay.play(audioList);

注意，由于谷歌浏览器对音频播放的限制，一开始音频可能不会自动播放，要用鼠标点击一下屏幕才会触发，而火狐浏览器就不存在这个问题。

[howler.js]: https://howlerjs.com/