Как случайным образом воспроизвести несколько аудиофайлов в аудио теге с использованием JavaScript? - PullRequest
Новая
       10

Как случайным образом воспроизвести несколько аудиофайлов в аудио теге с использованием JavaScript?

0 голосов
/ 08 ноября 2018

Я пытаюсь случайно воспроизвести звук файла, когда нажимаю на ссылку. У меня есть несколько ссылок, которые в настоящее время воспроизводят один звук на каждую ссылку при нажатии. 

<audio id="audio-fail">
  <!--<source src="" type="audio/mpeg"> -->
  <source src="/application/sounds/other/fail_1.mp3" type="audio/mpeg">
</audio>

Я добавил другой источник: 

<audio id="audio-fail">
  <!--<source src="" type="audio/mpeg"> -->
  <source src="/application/sounds/other/fail_1.mp3" type="audio/mpeg">
  <source src="/application/sounds/other/fail_2.mp3" type="audio/mpeg">
</audio>

В jquery я читаю файл так: 

const failSound = $('#audio-fail')[0];
$('.js-clickable-object').on('click', function (e) {
   ailSound.play();
});

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

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Для этой цели нельзя использовать один звуковой тег, содержащий несколько разных исходных тегов, поскольку браузер воспроизводит первый поддерживаемый файл.

Таким образом, вам нужно сохранить источник аудио в массиве и при событии щелчка сгенерировать случайное число между 0 и длиной массива и найти целевой источник по сгенерированному индексу. В конце укажите адрес файла в src атрибуте исходного тега. 

var src = [
  "http://free-mobi.org/files/ringtones/1/by_richy.mp3",
  "http://free-mobi.org/files/4/sleepy.mp3",
  "http://free-mobi.org/files/4/good_morning_alarm.mp3",
  "http://free-mobi.org/files/ringtones/1/otis_redding.mp3"
];

$('button').on('click', function (e) {
  var rand = Math.floor(Math.random() * src.length);
  $('#audio-fail source').attr("src", src[rand])  
  $('#audio-fail')[0].load();
  $('#audio-fail')[0].play();
});

<audio id="audio-fail">
  <source src="" type="audio/mpeg">
</audio>
<button>Play</button>

Поскольку сниппет не воспроизводит звук, я создал демо в jsfiddle

0 голосов
/ 08 ноября 2018

Мое решение задач ниже. Я считаю, что есть лучшее решение. 

<audio id="audio-fail">
        <source src="/application/sounds/other/fail_1.mp3" type="audio/mpeg">
</audio>

<audio id="audio-fail_again">
        <source src="/application/sounds/other/fail_2.mp3" type="audio/mpeg">
</audio>

JavaScript ниже: 

const multipleFailSounds = [$('#audio-fail')[0],$('#audio-fail-again')[0] ];

var randomSelection = Math.floor(Math.random() * (multipleFailSounds.length));                
multipleFailSounds[randomSelection].play();

Не стесняйтесь размещать другие решения, если вы считаете, что это лучше. Мне просто нужно было быстро исправить.

...