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

‹аудио›

Использование HTML-элемента <audio> довольно просто. Как минимум, вам нужно определить атрибут src, но другие параметры включают autoplay, controls, loop и muted. Вы можете посетить сайт MDN для более подробной информации.

Игра Арни

Для своего приложения я создал игру-викторину Арнольда Шварценеггера, в которой использовались несколько звуковых фрагментов из его фильмов. Весело, правда?! При загрузке страницы у меня была игра Final Countdown в Европе, где музыка затихала, когда пользователь нажимал, чтобы начать игру. При ответе на каждый вопрос случайным образом генерируется другой аудиоклип Арни в зависимости от того, правильный или неправильный ответ. На некоторые из моих вопросов воспроизведение звука при нажатии кнопки дает ключ к ответу. Наконец, в зависимости от конечной оценки пользователя, Арни сообщает вам, как вы выступили.

Реализация аудио

Учитывая, что у каждого вопроса есть уникальный звуковой ответ, имеет смысл, чтобы у каждого вопроса был свой элемент <audio>. Тем не менее, более строгий подход, когда ваш разнородный звук воспроизводится в разное время, заключается в использовании только одного элемента. Это был мой подход, и у меня есть около 31 аудиоклипа. Используя JavaScript для управления звуком, нет необходимости в атрибуте управления, который отображает встроенные в браузер элементы. Все, что вам нужно сделать, это изменить атрибут <src> для каждого действия пользователя, которое запускает звуковой ответ.

// HTML
<audio src="./assets/someAudio.mp3"></audio>
// Vanilla JavaScript
let audioElement = document.getElementById('audioID');
audio.setAttribute('src', './assets/newAudio.mp3');
// JQuery
$('.audioElementClass').attr('src', './assets/newAudio.mp3')[0].play();

Примечание. Вам потребуются дополнительные аудиоэлементы, если вы собираетесь воспроизводить несколько аудиофайлов одновременно.

Если у вас есть тема и вы хотите воспроизвести один из множества звуков случайным образом, вы можете сделать это, используя массив из src путей и выбирая один случайным образом:

// 1. Array of audio source paths
const arrayOfAudio = [
   "./assets/audio/audio1.mp3",
   "./assets/audio/audio2.mp3",
   "./assets/audio/audio3.mp3",
   "./assets/audio/audio4.mp3"
]
// 2. Function to return a random value from an array
randomArrayValue = (array) => {
   return array[Math.floor(Math.random() * array.length)];
}
// 3. Get random source path from the array
const randomAudioSource = randomArrayValue(arrayOfAudio);
// 4. On a user event such as click or hover, set the attribute as described above.
// 4a. Vanilla JavaScript
let audioElement = document.getElementById('audioID');
setSource = () => {
   setAttribute('src', './assets/newAudio.mp3');
}
audio.onclick = setSource; 
// 4b. JQuery
$('.buttonClass').on('click', function (e) {
   e.preventDefault();
   $('.audioElementClass').attr('src', './assets/newAudio.mp3')[0].play();

Аудио onClick

Когда вы хотите воспроизвести звук при нажатии кнопки, используемый вами элемент зависит от предполагаемого взаимодействия с пользователем. Если вы хотите, чтобы звук перезапускался каждый раз, когда пользователь нажимает кнопку, используйте тег <a>. Не забудьте предотвратить действие по умолчанию, как в приведенном выше примере JQuery.

Чтобы звук не перезапускался при нажатии кнопки, используйте элемент <button>.

Аудио при загрузке страницы

Воспроизведение звука при загрузке страницы довольно просто. В ванильном JavaScript вы используете обработчик события onload, а в JQuery вы воспроизводите звук непосредственно с помощью document.ready.

// Vanilla JavaScript
window.onload = function() {
   let audioElement = document.getElementById('audioID');
   audioElement.play();
}
// JQuery
$(document).ready(function() {
    $('#audioID').get(0).play();
});

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

// Vanilla JavaScript - Volume runs from 0 to 1
let audioElement = document.getElementById('audioID');
audioElement.volume = 0.5;
// JQuery - Using the animation method for JQuery, you can control how long it takes for the volume to reach its end state. Time read in milliseconds.
$('.audioElementClass').animate({ volume: 0 }, 1500);

Примечание. С апреля 2018 года новая политика Google Chrome запрещает воспроизведение аудиофайлов при загрузке страницы. Вы можете настроить звук как приостановленный, но вам понадобится прослушиватель событий, чтобы возобновить его. Документацию Google по этой политике можно найти здесь.