Я пытаюсь воспроизвести аудиофайл, когда нажимаю кнопку, но он не работает, мой html-код:
<html>
<body>
<div id="container">
<button id="play">
Play Music
</button>
</div>
</body>
</html>
мой JavaScript:
$('document').ready(function () {
$('#play').click(function () {
var audio = {};
audio["walk"] = new Audio();
audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
audio["walk"].addEventListener('load', function () {
audio["walk"].play();
});
});
});
Для этого я тоже создал Fiddle .
javascript
jquery
html
Суреш Патту
источник
источник
Ответы:
Какой подход?
Вы можете воспроизводить звук с помощью
<audio>тегов или<object>или<embed>. Ленивая загрузка (загрузка, когда она вам нужна) звук - лучший подход, если его размер небольшой. Вы можете создать аудиоэлемент динамически, когда он загружен, вы можете запустить его.play()и приостановить с помощью.pause().Вещи, которые мы использовали
Мы будем использовать
canplayсобытие, чтобы определить, что наш файл готов к воспроизведению.Нет
.stop()функции для аудиоэлементов. Мы можем только приостановить их. И когда мы хотим начать с начала аудиофайла, мы меняем его.currentTime. Мы будем использовать эту строку в нашем примереaudioElement.currentTime = 0;. Для достижения этой.stop()функции мы сначала приостанавливаем файл, а затем сбрасываем его время.Мы можем захотеть узнать длину аудиофайла и текущее время воспроизведения. Мы уже узнали
.currentTimeвыше, чтобы узнать его длину, мы используем.duration.Пример руководства
timeupdateсобытие для обновления текущего времени при.currentTimeизменении звука .canplayсобытие для обновления информации, когда файл готов к воспроизведению.$(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3'); audioElement.addEventListener('ended', function() { this.play(); }, false); audioElement.addEventListener("canplay",function(){ $("#length").text("Duration:" + audioElement.duration + " seconds"); $("#source").text("Source:" + audioElement.src); $("#status").text("Status: Ready to play").css("color","green"); }); audioElement.addEventListener("timeupdate",function(){ $("#currentTime").text("Current second:" + audioElement.currentTime); }); $('#play').click(function() { audioElement.play(); $("#status").text("Status: Playing"); }); $('#pause').click(function() { audioElement.pause(); $("#status").text("Status: Paused"); }); $('#restart').click(function() { audioElement.currentTime = 0; }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <h2>Sound Information</h2> <div id="length">Duration:</div> <div id="source">Source:</div> <div id="status" style="color:red;">Status: Loading</div> <hr> <h2>Control Buttons</h2> <button id="play">Play</button> <button id="pause">Pause</button> <button id="restart">Restart</button> <hr> <h2>Playing Information</h2> <div id="currentTime">0</div> </body>источник
endedсобытие, которое воспроизводит звук с самого начала.$("#myAudioElement")[0].play();Это не работает так,
$("#myAudioElement").play()как вы ожидаете. Официальная причина заключается в том, что включение его в jQuery добавитplay()метод к каждому элементу, что вызовет ненужные накладные расходы. Поэтому вместо этого вы должны ссылаться на него по его положению в массиве элементов DOM, которые вы извлекаете$("#myAudioElement"), иначе 0.Эта цитата взята из сообщенной об ошибке , которая была закрыта как "feature / wontfix":
источник
Для всех, кто следит за мной, я просто взял ответ Ахмета и обновил здесь jsfiddle исходного вопроса , заменив:
за
http://www.uscis.gov/files/nativedocuments/Track%2093.mp3ссылки в свободно доступном mp3 вне сети. Спасибо, что поделились простым решением!
источник
У меня есть хорошее и универсальное решение с запасным вариантом:
<script type="text/javascript"> var audiotypes={ "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function ss_soundbits(sound){ var audio_element = document.createElement('audio') if (audio_element.canPlayType){ for (var i=0; i<arguments.length; i++){ var source_element = document.createElement('source') source_element.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) source_element.setAttribute('type', audiotypes[RegExp.$1]) audio_element.appendChild(source_element) } audio_element.load() audio_element.playclip=function(){ audio_element.pause() audio_element.currentTime=0 audio_element.play() } return audio_element } } </script>После этого вы можете инициализировать столько аудио, сколько захотите:
<script type="text/javascript" > var clicksound = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3"); var plopsound = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3"); </script>Теперь вы можете получить доступ к инициализированному аудиоэлементу где угодно с помощью простых вызовов событий, таких как
onclick="clicksound.playclip()" onmouseover="plopsound.playclip()"источник
Демонстрация JSFiddle
Вот что я использую с JQuery:
$('.button').on('click', function () { var obj = document.createElement("audio"); obj.src = "linktoyourfile.wav"; obj.play(); });источник
Что о:
$('#play').click(function() { const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3"); audio.play(); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>источник