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

Я пытаюсь воспроизвести аудиофайл, когда я нажимаю кнопку, но он не работает, мой 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 для этого.

Ответ 1

Какой подход?

Вы можете воспроизводить аудио с тегом <audio> или <object> или <embed>. Lazy loading (загрузка, когда вам это нужно) звук лучше всего подходит, если его размер мал. Вы можете динамически создавать звуковой элемент, когда его загружать, вы можете запустить его с помощью .play() и приостановить его с помощью .pause().

Что мы использовали

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

Нет функции .stop() для аудиоэлементов. Мы можем только приостановить их. И когда мы хотим начать с начала аудиофайла, мы меняем его .currentTime. Мы будем использовать эту строку в нашем примере audioElement.currentTime = 0;. Чтобы достичь функции .stop(), мы сначала приостанавливаем файл, а затем reset его время.

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

Пример руководства

Когда документ готов, мы создали динамический элемент динамически
Мы устанавливаем источник звука, который хотим воспроизвести.
Мы использовали событие "закончился", чтобы снова запустить файл.

Когда currentTime равно его длительности, аудиофайл остановится играть. Всякий раз, когда вы используете play(), он начнется с самого начала.

Мы использовали событие 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>

Ответ 2

Фактический ответ в jQuery:

$("#myAudioElement")[0].play();

Он не работает с $("#myAudioElement").play() как и следовало ожидать. Официальная причина заключается в том, что включение его в jQuery добавит метод play() к каждому отдельному элементу, что приведет к ненужным накладным расходам. Поэтому вместо этого вы должны ссылаться на него по его положению в массиве элементов DOM, которые вы $("#myAudioElement") с помощью $("#myAudioElement"), иначе 0.

Эта цитата взята из сообщения об ошибке, которая была закрыта как "feature/wontfix":

Для этого нам нужно добавить имя метода jQuery для каждого имени метода элемента DOM. И, конечно, этот метод ничего не будет делать для элементов, не относящихся к медиа, так что не похоже, что он будет стоить дополнительных байтов, которые потребуются.

Ответ 3

Для кого-то другого, следующего за мной, я просто отвел Ahmet и обновил первоначальный запрос jsfiddle здесь, подставив:

audio.mp3

для

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

соединяясь в свободно доступном mp3 с Интернета. Благодарим вас за то, что вы получили простое решение!

Ответ 4

У меня есть приятное и универсальное решение с откатом:

<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()"

Ответ 5

Если это поможет вам в 2019 году, то вы должны знать, что я создаю плагин jquery/Zepto. Вы можете скачать его здесь: https://github.com/xpectmore/simple-jquery-audio-play-button

Это под лицензией A-FREE-to-MANKIND очень простой материал.

Ответ 6

Демонстрация JSFiddle

Вот что я использую с JQuery:

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});