Odtwórz plik audio za pomocą jQuery po kliknięciu przycisku

Question 1

Próbuję odtworzyć plik audio po kliknięciu przycisku, ale to nie działa, mój kod html to:

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

mój JavaScript to:

$('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();
        });
    });
});

Do tego też stworzyłem Fiddle .

Question 2

Które podejście?

Możesz odtwarzać dźwięk z <audio>tagiem lub <object>lub <embed>. Leniwe ładowanie (ładowanie, kiedy tego potrzebujesz) dźwięk jest najlepszym podejściem, jeśli jego rozmiar jest mały. Możesz tworzyć element audio dynamicznie, po załadowaniu możesz go uruchomić .play()lub pauzować .pause().

Rzeczy, których używaliśmy

Użyjemy canplayzdarzenia do wykrycia, że nasz plik jest gotowy do odtworzenia.

Nie ma .stop()funkcji dla elementów audio. Możemy je tylko wstrzymać. A kiedy chcemy zacząć od początku pliku audio, zmieniamy jego .currentTime. Użyjemy tej linii w naszym przykładzie audioElement.currentTime = 0;. Aby uzyskać .stop()funkcję, najpierw wstrzymujemy plik, a następnie resetujemy jego czas.

Możemy chcieć poznać długość pliku audio i aktualny czas odtwarzania. Dowiedzieliśmy się już .currentTimepowyżej, aby poznać jego długość, której używamy .duration.

Przykładowy przewodnik

Gdy dokument jest gotowy, dynamicznie utworzyliśmy element audio
Ustawiamy jego źródło z dźwiękiem, który chcemy odtworzyć.
Użyliśmy zdarzenia „zakończenie”, aby ponownie uruchomić plik.

Gdy currentTime jest równy czasowi jego trwania, plik audio przestanie być odtwarzany. Za każdym razem, gdy używasz play(), zacznie się od początku.

Użyliśmy timeupdatezdarzenia, aby zaktualizować bieżący czas za każdym razem, gdy .currentTimezmienia się dźwięk .
Wykorzystaliśmy canplayzdarzenie do aktualizacji informacji, kiedy plik jest gotowy do odtworzenia.
Stworzyliśmy przyciski do odtwarzania, pauzy, restartu.

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

Rozwiń fragment

Question 3

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

Nie działa $("#myAudioElement").play()tak, jak byś się spodziewał. Oficjalnym powodem jest to, że włączenie go do jQuery dodałoby play()metodę do każdego pojedynczego elementu, co spowodowałoby niepotrzebne obciążenie. Zamiast tego musisz odnosić się do niego poprzez jego pozycję w tablicy elementów DOM, z którymi pobierasz $("#myAudioElement"), czyli 0.

Ten cytat pochodzi z zgłoszonego błędu , który został zamknięty jako „feature / wontfix”:

Aby to zrobić, musielibyśmy dodać nazwę metody jQuery dla każdej nazwy metody elementu DOM. I oczywiście ta metoda nie zrobiłaby nic w przypadku elementów niemedialnych, więc nie wydaje się, aby była warta dodatkowych bajtów, które by zajęła.

Question 4

Dla każdego, kto podążał za mną, po prostu wziąłem odpowiedź Ahmeta i zaktualizowałem tutaj plik jsfiddle oryginalnego pytającego , zastępując:

audio.mp3

dla

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

zamieszczanie linków w swobodnie dostępnym formacie mp3 poza siecią. Dziękujemy za udostępnienie prostego rozwiązania!

Question 5

Mam tutaj ładne i wszechstronne rozwiązanie z funkcją awaryjną:

<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>

Następnie możesz zainicjować dowolną liczbę plików audio:

<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>

Teraz możesz dotrzeć do zainicjalizowanego elementu audio w dowolnym miejscu, korzystając z prostych wywołań zdarzeń, takich jak

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

Demonstracja JSFiddle

Oto, czego używam z JQuery:

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

Question 7

Co powiesz na:

$('#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>

Rozwiń fragment