Lire un fichier audio à l'aide de jQuery quand on clique sur un bouton

Je suis en train de lire un fichier audio lorsque je clique sur le bouton, mais cela ne fonctionne pas, mon code html est:

<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 Violon pour que trop.

  • Étiez-vous à l'aide de audio de HTML5
  • Essayez d'ajouter audio["walk"].load(); avant la audio["walk"].play();. Aussi, il ne peut pas travailler en raison de votre objet audio doit être var audio = [];, pas var audio = {};.
InformationsquelleAutor Suresh Pattu | 2011-12-13
  1. 132

    Qui approche?

    Vous pouvez lire des fichiers audio avec <audio> tag ou <object> ou <embed>.
    Lazy loading(chargement quand vous en avez besoin) le son est la meilleure approche si sa taille est petite. Vous pouvez créer l'élément audio dynamiquement, lors de son chargement, vous pouvez le lancer avec .play() et de la mettre en pause avec .pause().

    Choses, nous avons utilisé

    Nous allons utiliser canplay événement à détecter notre dossier est prêt à être joué.

    Il n'y a pas de .stop() fonction par des éléments audio. Nous ne pouvons que mettre en veille. Et quand nous voulons commencer à partir du début du fichier audio nous changer sa .currentTime. Nous allons utiliser cette ligne dans notre exemple audioElement.currentTime = 0;. Pour atteindre .stop() fonction, nous avons d'abord mettre en pause le fichier puis de réinitialiser son temps.

    On peut vouloir connaître la longueur du fichier audio et de la durée de lecture actuelle. Nous avons déjà appris .currentTimeci-dessus, à savoir sa longueur, nous utilisons .duration.

    Exemple Guide

    1. Lorsque le document est prêt, nous avons créé un élément audio dynamiquement
    2. Nous définir sa source avec l'audio que nous voulons jouer.
    3. Nous avons utilisé "terminé" de l'événement pour lancer à nouveau le fichier.

    Lorsque le currentTime est égale à la durée du fichier audio arrêter
    en jouant. Chaque fois que vous utilisez play(), il va commencer à partir du début.

    1. Nous avons utilisé timeupdate événement de mise à jour en cours du temps lors de l'audio .currentTime changements.
    2. Nous avons utilisé canplay événement de mise à jour de l'information lorsque le fichier est prêt à être joué.
    3. Nous avons créé des boutons play, pause, redémarrer.

    JS:

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

    HTML:

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

    • Et vous devez placer ce script à la fin de <body>*
    • ok merci ça fonctionne 🙂
    • Oh, bien sûr, mon erreur.
    • Merci ça fonctionne 🙂
    • jsfiddle.net/gD4Dr/1256
    • ici est un balisage qui la plupart fonctionne dans tous les navigateurs.
    • Très sympa même si l'OP explicitement dit qu'il voulait le faire en jQuery. Dans votre exemple, vous utilisez javascript pour la manipulation du dom et des écouteurs d'événement.

    InformationsquelleAutor Ahmet Can Güven
  2. 37

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

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

    Il ne fonctionne pas avec $("#myAudioElement").play() comme vous le souhaitez. La raison officielle est que de l'intégrer jQuery à ajouter un play() méthode pour chaque élément, ce qui entraînerait une surcharge inutile. Donc, au lieu de cela vous devez vous référer à elle de par sa position dans le tableau des éléments du DOM que vous récupérez avec $("#myAudioElement"), aka 0.

    Cette citation est celle d'un bug qui a été soumise à ce sujet, qui a été fermé comme "fonction/wontfix":

    De le faire, nous aurions besoin d'ajouter un jQuery nom de la méthode pour chaque élément du DOM nom de la méthode. Et bien sûr, cette méthode n'en est rien pour les non-éléments multimédias afin de ne pas sembler comme il serait intéressant de les octets supplémentaires qu'il faudrait.

    • Merci!!!! Exactement ce que je cherchais!
    • Belle réponse ...
    InformationsquelleAutor felwithe
  3. 20

    Pour quelqu'un d'autre, j'ai simplement pris Ahmet réponse et mis à jour la première personne du jsfiddle ici, la substitution:

    audio.mp3

    pour

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

    le lien disponible gratuitement, mp3 sur le web. Merci pour le partage de la solution de facilité!

    • ne fonctionne pas sous Firefox
    • Fonctionne sur Firefox 42 sur Ubuntu
    • La charge de l'événement n'est pas déclenché dans ce jsfiiddle dans google Chrome. Il ne joue qu'en raison de l'attribut autoplay.
    InformationsquelleAutor texas-bronius
  4. 11

    Je ici ont une belle et solution 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 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 la initialisée élément audio comme bon vous semble avec de simples cas des appels comme

    onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"
    InformationsquelleAutor André R. Kohl
  5. -2

    Si cela vous aider en 2019 ,
    ensuite, vous devez savoir - je construire un jquery /Zepto plugin.
    Vous pouvez le télécharger ici:
    https://github.com/xpectmore/simple-jquery-audio-play-button

    Qui est SOUS UNE-GRATUIT-pour-les hommes de licence quelque chose de très simple.
    J'ai fait ce plugin car LE GARS DE LA CUISINE a été décider de bloquer la lecture automatique à partir de MOZILLA Firefox version 66(j'ai utilisé dans mon framework php,dans "Hello World" démo certains "Bienvenue" texte pour parler de l'audio pour certaines langues, juste pour la démo but) considérez donc ce n'est pas une réponse pour ce forum, mais un retour à MOZILLA.

    InformationsquelleAutor Constantin