Воспроизвести несколько аудио файлов с помощью Howler.js - PullRequest
Новая
       38

Воспроизвести несколько аудио файлов с помощью Howler.js

0 голосов
/ 30 октября 2019

Мне нужно воспроизвести несколько аудиофайлов с использованием минимально возможного количества кодов.

В моем коде ниже мне нужно повторно использовать один и тот же код каждый раз, когда я хочу воспроизвести другой звук. 

<!-- html buttons -->
<button class="btn" id="playBtn">play</button></br>
<button class="btn" id="playBtn2">play2</button>

<!-- adding audio files using the same code twice with two variables sound and sound 2-->
<script>
var sound = new Howl({
  src: ['https://www.oxfordlearnersdictionaries.com/media/english/uk_pron/f/f_1/f_1_g/f_1_gb_1_abbr.mp3']
});

playBtn.addEventListener('click', function() {
sound.play();
});

</script>


<script>
var sound2 = new Howl({
  src: ['https://www.oxfordlearnersdictionaries.com/media/english/us_pron/l/lov/love_/love__us_1.mp3']
});

playBtn2.addEventListener('click', function() {
sound2.play();
});

</script>

Можно ли добавить больше аудиофайлов, но используя меньше кодов. Спасибо:)

Ответы [ 2 ]

0 голосов
/ 30 октября 2019

Вы можете создать необходимый вам набор звуков и динамически создавать кнопки 

<!-- html container for buttons-->
<div id="btn-container"></div>

<script>
var files = ['https://www.oxfordlearnersdictionaries.com/media/english/uk_pron/f/f_1/f_1_g/f_1_gb_1_abbr.mp3', 'https://www.oxfordlearnersdictionaries.com/media/english/us_pron/l/lov/love_/love__us_1.mp3']; // add more urls here and buttons appear dynamically

var sounds = files.map(audio => new Howl({src:[audio]}));
var html = sounds.map((sound) => {
    let btn = document.createElement("button");
    btn.class = "btn";
    btn.addEventListener('click', () => sound.play());
    document.querySelector('#btn-container').append(elem);
})
0 голосов
/ 30 октября 2019

Создайте массив URL-адресов музыкальных файлов и звуков: 

let myUrls = ["url1", "url2", "url3"];
let sounds = new Array(myUrls.length);

Итерируйте по этому массиву, чтобы создать свои элементы: 

myUrls.forEach((url, i) => {
    sounds[i] = new Howl({
        src: [url]
    })

    let elem = document.createElement("button");
    elem.class = "btn";
    elem.id = `playBtn${i}`;
    elem.addEventListener('click', () => sounds[i].play());
    elem.innerText = `Play Sound ${i}`

    // Don't forget to add them to your target node!

    document.body.append(elem);

})

Надеюсь, что вы попадете на правильный путь.

...