web-dev-qa-db-fra.com

Jouer un fichier audio en utilisant jQuery quand un bouton est cliqué

J'essaie de lire un fichier audio quand je clique sur le bouton, mais cela ne fonctionne pas, mon code html est le suivant:

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

mon JavaScript est:

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

J'ai créé un Fiddle pour cela aussi.

javascriptjqueryhtml
84
Suresh Pattu

Quelle approche?

Vous pouvez lire de l'audio avec la balise <audio> ou <object> ou <embed>. Chargement paresseux (chargez lorsque vous en avez besoin) le son est la meilleure approche si sa taille est petite. Vous pouvez créer l'élément audio de manière dynamique. Une fois chargé, vous pouvez le démarrer avec .play() et le suspendre avec .pause().

Choses que nous avons utilisées

Nous allons utiliser l'événement canplay pour détecter que notre fichier est prêt à être lu.

Il n'y a pas de fonction .stop() pour les éléments audio. Nous ne pouvons que les mettre en pause. Et lorsque nous voulons commencer au début du fichier audio, nous changeons son .currentTime. Nous allons utiliser cette ligne dans notre exemple audioElement.currentTime = 0;. Pour obtenir la fonction .stop(), nous mettons d'abord le fichier en pause, puis réinitialisons son heure.

Nous voudrons peut-être connaître la longueur du fichier audio et la durée de lecture actuelle. Nous avons déjà appris .currentTime ci-dessus. Pour en connaître la longueur, nous utilisons .duration.

Exemple de guide

  1. Lorsque le document est prêt, nous avons créé un élément audio de manière dynamique
  2. Nous définissons sa source avec l'audio que nous voulons jouer.
  3. Nous avons utilisé l'événement 'terminé' pour redémarrer le fichier.

Lorsque le temps actuel est égal à sa durée, la lecture du fichier audio est interrompue. A chaque fois que vous utiliserez play(), cela commencera au début.

  1. Nous avons utilisé l'événement timeupdate pour mettre à jour l'heure actuelle chaque fois que l'audio .currentTime change.
  2. Nous avons utilisé l'événement canplay pour mettre à jour les informations lorsque le fichier est prêt à être lu.
  3. Nous avons créé des boutons pour jouer, mettre en pause, redémarrer.
$(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>
136
Ahmet Can Güven

La réponse réelle, dans jQuery, est

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

Cela ne fonctionne pas avec $("#myAudioElement").play() comme on peut s'y attendre. La raison officielle est que son intégration dans jQuery ajouterait une méthode play() à chaque élément, ce qui entraînerait une surcharge inutile. Vous devez donc vous y référer par sa position dans le tableau des éléments DOM que vous récupérez avec $("#myAudioElement"), autrement dit 0.

Cette citation provient d'un bug qui a été soumis à ce sujet , qui était fermé en tant que "feature/wontfix":

Pour ce faire, nous aurions besoin d'ajouter un nom de méthode jQuery pour chaque nom de méthode d'élément DOM. Et bien sûr, cette méthode ne ferait rien pour les éléments non-média, il ne semble donc pas que cela vaille la peine de prendre des octets supplémentaires.

38
felwithe

Pour ceux qui suivent, j'ai simplement pris la réponse d'Ahmet et mis à jour le demandeur d'origine jsfiddle here , en remplaçant:

audio.mp3

for

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

la liaison dans un mp3 disponible gratuitement sur le web. Merci de partager la solution facile!

21
texas-bronius

J'ai ici une solution agréable et polyvalente avec un repli:

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

Après cela, vous pouvez initialiser autant d’audio que vous le souhaitez:

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

Maintenant, vous pouvez atteindre l’élément audio initialisé où vous voulez avec de simples appels d’événement tels que

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"
11
André R. Kohl