使用howlerjs播放多个音频文件

时间:2017-02-19 04:19:54

标签: javascript jquery howler.js

我尝试按顺序播放多个音频文件而没有延迟,我尝试下面的代码无效。在实际场景中,我只需要一个按钮即可播放和播放。播放音频后暂停,反之亦然

http://codepen.io/anon/pen/PWrYKw

<button id='play-button'> Play</button>
<button id='pause-button'>Pause</button>
<button id='preset-changer'>Present</button>

(function( $ ) {
'use strict';

jQuery(window).load(function() {
    var sound_files = {
            sound1 : new Howl({
                src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3'],
                loop: true
            }),
            sound2 : new Howl({
                src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3'],
                loop: true
            }),
            sound3 : new Howl({
                src: ['http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3'],
                loop: true
            })
        };

    var play_button = $('#play-button'),
        pause_button = $('#pause-button'),
        shift_preset = $('#preset-changer');

    play_button.click(function() {
        //sound_files.play();
          for (var prop in sound_files) {
            if(!sound_files.hasOwnProperty(prop)) continue;
            {sound_files[prop].play();}
          }
        });     

    //});
});

})(jQuery);

我不知道我做错了什么,因为我没有看到任何错误消息。

2 个答案:

答案 0 :(得分:0)

试试这个:

#include <assert.h>
#include <limits.h>
#include <stdio.h>

int main(void){
    unsigned int start, end, i, count = 0;

    printf("Enter start and end: ");
    int x = scanf("%u %u", &start, &end);
    assert(x == 2);            // XXX: INSERT PROPER ERROR HANDLING!

    // find the first power greater than or equal to start
    for (i = 1; i < start && UINT_MAX / 3 >= i; i *= 3);

    // ... then count each one less than or equal to end
    while (i <= end && UINT_MAX / 3 >= i) {
        printf("%u\n", i);
        i *= 3;
        count++;
    }

    printf("Answer = %u\n", count);
}

答案 1 :(得分:0)

您没有正确引用CodePen演示中的@Override public boolean onNavigationItemSelected(MenuItem item) { // Handle navigation view item clicks here. int id = item.getItemId(); ....... else if (id == R.id.nav_ipucu) { FragmentManager fm = getFragmentManager(); fm.beginTransaction().replace(R.id.content_frame, new IpuclariSayfasi(), "IpuclariSayfasi").commit(); } ....... } 文件。使用此更改 - howler.js

另一件事,https://rawgit.com/goldfire/howler.js/master/dist/howler.js早已被弃用。使用.load()更改该行,如下所示:

.on('load', fn)

它适用于上述变化。

编辑#1 :您需要利用$(window).on('load', function() { ... }); 对象为您提供的正确排序曲目的事件。这是我如何做到的,虽然我认为它可以更清洁更多的状态变量,特别是因为你想要结合暂停和恢复:

Howler