Riproduci un file audio utilizzando jQuery quando si fa clic su un pulsante

Question 1

Sto provando a riprodurre un file audio quando faccio clic sul pulsante, ma non funziona, il mio codice html è:

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

il mio 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();
        });
    });
});

Ho creato un violino anche per quello.

Question 2

Quale approccio?

Puoi riprodurre l'audio con <audio>tag o <object>o <embed>. Caricamento lento (carica quando ne hai bisogno) il suono è l'approccio migliore se le sue dimensioni sono piccole. Puoi creare l'elemento audio dinamicamente, quando è caricato puoi avviarlo con .play()e metterlo in pausa con .pause().

Cose che abbiamo usato

Useremo l' canplayevento per rilevare che il nostro file è pronto per essere riprodotto.

Non esiste alcuna .stop()funzione per gli elementi audio. Possiamo solo metterli in pausa. E quando vogliamo iniziare dall'inizio del file audio, cambiamo il suo .currentTime. Useremo questa linea nel nostro esempio audioElement.currentTime = 0;. Per ottenere la .stop()funzione, prima mettiamo in pausa il file, quindi ripristiniamo il suo tempo.

Potremmo voler conoscere la lunghezza del file audio e il tempo di riproduzione corrente. Abbiamo già imparato .currentTimesopra, per imparare la sua lunghezza che usiamo.duration .

Guida di esempio

Quando il documento è pronto, abbiamo creato dinamicamente un elemento audio
Impostiamo la sua sorgente con l'audio che vogliamo riprodurre.
Abbiamo utilizzato l'evento "terminato" per riavviare il file.

Quando il CurrentTime è uguale alla sua durata, il file audio smetterà di suonare. Ogni volta che lo usi play(), inizierà dall'inizio.

Abbiamo utilizzato l' timeupdateevento per aggiornare l'ora corrente ogni volta che l'audio.currentTime cambia.
Abbiamo usato canplay evento per aggiornare le informazioni quando il file è pronto per essere riprodotto.
Abbiamo creato pulsanti per riprodurre, mettere in pausa, riavviare.

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

Espandi lo snippet

Question 3

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

Non funziona $("#myAudioElement").play()come ti aspetteresti. Il motivo ufficiale è che incorporarlo in jQuery aggiungerebbe un play()metodo a ogni singolo elemento, il che causerebbe un sovraccarico non necessario. Quindi, invece, devi fare riferimento ad esso dalla sua posizione nell'array di elementi DOM con cui stai recuperando $("#myAudioElement"), ovvero 0.

Questa citazione proviene da un bug che è stato presentato al riguardo , che è stato chiuso come "feature / wontfix":

Per fare ciò avremmo bisogno di aggiungere un nome di metodo jQuery per ogni nome di metodo dell'elemento DOM. E ovviamente quel metodo non farebbe nulla per gli elementi non multimediali, quindi non sembra valga la pena i byte extra necessari.

Question 4

Per chiunque altro abbia seguito, ho semplicemente preso la risposta di Ahmet e aggiornato qui il jsfiddle del richiedente originale , sostituendo:

audio.mp3

per

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

collegamento in un mp3 disponibile gratuitamente dal web. Grazie per aver condiviso la soluzione facile!

Question 5

Ho qui una soluzione carina e versatile con un fallback:

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

Dopodiché puoi inizializzare tutto l'audio che desideri:

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

Ora puoi raggiungere l'elemento audio inizializzato dove preferisci con semplici chiamate di eventi come

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

Dimostrazione JSFiddle

Questo è quello che uso con JQuery:

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

Question 7

Che dire:

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

Espandi lo snippet