Воспроизведение аудиофайла с помощью 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();
        });
    });
});

Я создал Скрипка для этого тоже.

4 73
javascript html jquery

4 ответа:

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

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

вещи, которые мы использовали

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

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

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

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

  1. когда документ готов мы создали звуковой элемент динамически
  2. мы устанавливаем его источник с аудио, которое мы хотим воспроизвести.
  3. мы использовали событие 'ended' для повторного запуска файла.

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

  1. мы timeupdate событие для обновления текущего времени, когда аудио .currentTime изменения.
  2. мы используется canplay событие для обновления информации, когда файл готов к воспроизведению.
  3. мы создали кнопки для воспроизведения, паузы, перезагрузки. 

$(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>
121

фактический ответ, в jQuery, составляет 

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

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

эта цитата из ошибка, которая была представлена об этом, который был закрыт как "feature/wontfix":

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

24

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

audio.mp3

на

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

связывание в свободном доступе mp3 из интернета. Спасибо за простое решение!

21

у меня здесь есть хорошее и универсальное решение с резервным вариантом:

<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.])
                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()"
12