在链JavaScript中重现4个声音

时间:2017-12-14 09:56:55

标签: javascript audio time timing javascript-audio-api

我有一个Audios数组,如下所示:

let pentagram = [
  {
    sound: new Audio('somePathtoAudio.wav')
  },
  {
    sound: new Audio('somePathtoAudio.wav')
  },
  {
    sound: new Audio('somePathtoAudio.wav')
  },
  {
    sound: new Audio('somePathtoAudio.wav')
  }
];

我需要重现这4个音频,每个音频再播放1秒钟。

function play() {
    pentagrama[0].audio.play();
    pentagrama.forEach((part, i) => {
      setTimeout(() => {
        part.audio.pause();
        part.audio.currentTime = 0;
        if (i + 1 < pentagrama.length) pentagrama[i + 1].audio.play();
      }, (i + 1) * 1000);
    });
}

这就是我所做的,我不喜欢它,它有效,但有更好的方法吗? 因为我一直在寻找看起来更优雅的东西,但我还没找到。

1 个答案:

答案 0 :(得分:0)

是的,有更好的方法 - 使用SoundPlayer.js

加载SoundPlayer

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/SoundPlayer.js"></script>

这很容易!

const player = new SoundPlayer();

function play () {

    player.load( 'sound1.mp3' ).play( 1 );
    player.load( 'sound2.mp3' ).play( 2 );
    player.load( 'sound3.mp3' ).play( 3 );
    player.load( 'sound4.mp3' ).play( 4 );

}

传递给比赛的数字是几秒钟,直到它将被播放。

修改

如果您希望声音仅播放1秒钟,请使用:

const player = new SoundPlayer();

function play () {

    player.load( 'sound1.mp3' ).play( 1, 1 );
    player.load( 'sound2.mp3' ).play( 2, 1 );
    player.load( 'sound3.mp3' ).play( 3, 1 );
    player.load( 'sound4.mp3' ).play( 4, 1 );

}