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

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

Answer 2

Czy korzystałeś z dźwięku HTML5

OnesimusUnbound

Answer 3

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

Answer 4

1

I musisz umieścić ten skrypt na końcu <body> *

tbleckert,

Answer 5

tutaj jest znacznik, który działa głównie we wszystkich przeglądarkach .

shaijut

Answer 6

Bardzo fajnie, chociaż OP wyraźnie powiedział, że chce to zrobić w jQuery. W swoim przykładzie używasz czystego javascript do manipulacji domenami i detektorów zdarzeń.

Jacques,

Answer 7

Mam problem z tym fragmentem kodu: jak mogę automatycznie zatrzymać dźwięk po zakończeniu mp3? teraz, z moim bardzo krótkim dźwiękiem, nadal brzmi to w pętli

Domenico Monaco,

Answer 8

1

@DomenicoMonaco Po prostu usuń endedwydarzenie, które odtwarza dźwięk od początku.

Ahmet Can Güven

Answer 9

$("#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.

Answer 10

3

Dziękuję Ci! Dokładnie to, czego szukałem!

utdrmac

Answer 11

21

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!

texas-bronius
źródło

Działa na Firefoksie 42 na Ubuntu

Bojan Kogoj

1

Zdarzenie load nie jest uruchamiane w tym jsfiiddle w Chrome. Odtwarza tylko z powodu atrybutu autoodtwarzania.

Tom,

Answer 12

Działa na Firefoksie 42 na Ubuntu

Bojan Kogoj

Answer 13

1

Zdarzenie load nie jest uruchamiane w tym jsfiiddle w Chrome. Odtwarza tylko z powodu atrybutu autoodtwarzania.

Tom,

Answer 14

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

Answer 15

Demonstracja JSFiddle

Oto, czego używam z JQuery:

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

Answer 16

4

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

Luis David
źródło

to najprostszy sposób, działa jak urok i możesz uruchomić tę samą akcję za pomocą zdarzeń vanilla js, jeśli chcesz.

Andrea Mauro

Answer 17

to najprostszy sposób, działa jak urok i możesz uruchomić tę samą akcję za pomocą zdarzeń vanilla js, jeśli chcesz.

Andrea Mauro

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

Odpowiedzi:

Które podejście?

Rzeczy, których używaliśmy

Przykładowy przewodnik