Вопрос:
Итак, я полный любитель, когда дело доходит до кодирования, но мне все еще нравится заниматься этим. В настоящее время я работаю над звуковой дорожкой на основе html/jS/PHP, и я не могу понять, как остановить воспроизведение звука, нажав кнопку, чтобы воспроизвести другую.
<script type=»text/javascript» charset=»utf-8″> $(function() { $(«audio»).removeAttr(«controls»).each(function(i, audioElement) { var audio = $(this); var that = this; //closure to keep reference to current audio tag $(«#doc»).append($(‘<button>’+audio.attr(«title»)+'</button>’).click(function() { that.play(); })); }); }); </script>
Надеюсь, кто-то это поймет. Заранее спасибо. Существует также PHP-код для автоматического извлечения аудиофайла из папки в переднюю часть, возможно, ненужной информации для этой проблемы.
Лучший ответ:
Это не очень сложно сделать, если вы используете HTML5, который ввел HTMLAudioElement.
Вот минимальный код для того, что вы пытаетесь сделать:
// Let create a soundboard module («sb») var sb = { song: null, init: function () { sb.song = new Audio(); sb.listeners(); }, listeners: function () { $(«button»).click(sb.play); }, play: function (e) { sb.song.src = e.target.value; sb.song.play(); } }; $(document).ready(sb.init);<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Audio</title> </head> <body> <button value=»https://www.gnu.org/music/FreeSWSong.ogg»>Song #1</button> <button value=»https://www.gnu.org/music/free-software-song-herzog.ogg»>Song #2</button> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js»></script> </body> </html>
Вы также можете рассмотреть библиотеки, такие как howler.js, чтобы помочь вам в процессе разработки.
Ответ №1
Что бы вы могли сделать, это прежде, чем начать воспроизведение новой аудио паузы на все доступные аудио на странице. Что-то вроде этого.
var audioOne = document.querySelector(‘#audio-1’); var audioTwo = document.querySelector(‘#audio-2’); var allAudios = document.querySelectorAll(‘audio’); function stopAllAudio(){ allAudios.forEach(function(audio){ audio.pause(); }); } document.querySelector(‘#play-1’).addEventListener(‘click’, function(){ stopAllAudio(); audioOne.play(); }) document.querySelector(‘#play-2’).addEventListener(‘click’, function(){ stopAllAudio(); audioTwo.play(); })<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width»> <title>JS Bin</title> </head> <body> <audio id=»audio-1″ src=»http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg»> </audio> <audio id=»audio-2″ src=»http://www.w3schools.com/html/horse.mp3″> </audio> <button id=»play-1″> play audio 1 </button> <button id=»play-2″> play audio 2 </button> </body> </html>
Вместо добавления звука с помощью <audio> вы можете использовать HTMLAudioElement.
Ответ №2
Вы можете остановить и сбросить аудио элемент, приостановив его и установив свое текущее время равным 0. Вам нужно будет делать это каждый раз, когда нажимается кнопка. Пример:
// Available sounds: const sounds = { «Bottle»: «http://freewavesamples.com/files/Bottle.wav», «Bamboo»: «http://freewavesamples.com/files/Bamboo.wav» } // Load audio elements: let audios = {}; for (let [title, url] of Object.entries(sounds)) { audios[title] = new Audio(url); } // Create board buttons: let board = document.getElementById(«board»); for (let title of Object.keys(audios)) { let button = document.createElement(«button»); button.textContent = title; button.dataset[«audio»] = title; board.appendChild(button); } // Handle board button clicks: board.addEventListener(«click», function(event) { let audio = audios[event.target.dataset[«audio»]]; if (audio) { // Pause and reset all audio elements: for (let audio of Object.values(audios)) { audio.pause(); audio.currentTime = 0; } // Play this audio element: audio.play(); } });<div id=»board»></div>
Если вы хотите использовать всю мощь API веб-аудио, вы, вероятно, начнете строить свою звукозапись, подобную этой:
// Load buffer from ‘url’ calling ‘cb’ on complete: function loadBuffer(url, cb) { var request = new XMLHttpRequest(); request.open(‘GET’, url); request.responseType = ‘arraybuffer’; request.onload = () => context.decodeAudioData(request.response, cb); request.send(); } // Available sounds: const sounds = { «Bottle»: «url/to/bottle.wav», «Bamboo»: «url/to/bamboo.wav» }; let audioCtx = new (AudioContext || webkitAudioContext)(), board = document.getElementById(«soundboard»), buffers = {}, source; // Load buffers: for (let [title, url] of Object.entries(sounds)) { loadBuffer(url, buffer => buffers[title] = buffer); } // Create board buttons: for (let title of Object.keys(sounds)) { let button = document.createElement(«button»); button.textContent = title; button.dataset[«buffer»] = title; board.appendChild(button); } // Handle board button clicks: board.addEventListener(«click», function(event) { let buffer = buffers[event.target.dataset[«buffer»]]; if (buffer) { if (source) source.stop(); source = audioCtx.createBufferSource(); source.buffer = buffer; source.connect(audioCtx.destination); source.start(); } });<div id=»soundboard»></div>
Обратите внимание, что приведенные выше звуковые URL-адреса должны либо находиться в одном домене, либо находиться под одной и той же политикой происхождения (см. Заголовки CORS).
Ответ №3
Ниже код может помочь другим:
var audioMap = new Map(); var rappers = document.querySelectorAll(‘.rapper’); rappers.forEach(function(rapper){ audioMap.set(rapper, new Audio()); rapper.addEventListener(‘click’, function(){ var audio = new Audio($(this).data(‘audio’)); audio.play(); audioMap.set(this, audio); var current = audioMap.get(this); // console.log(‘get’, current); audioMap.forEach(function(audio){ if( audio != current ){ audio.pause(); audio.currentTime = 0; } }); }); });
