96 votes

Suresh Pattu avatar

Lecture d'un fichier audio à l'aide de jQuery lorsqu'un bouton est cliqué

Demandé el 13 de Décembre, 2011
Quand la question a-t-elle été
71564 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'essaie de lire un fichier audio lorsque 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 Violon pour cela aussi.

Demandé el 13 de Décembre, 2011 par Suresh Pattu

0 votes

Avatar de OnesimusUnbound

Est-ce que vous utilisiez audio de HTML5

Commenté el 13 de Décembre, 2011 par OnesimusUnbound

Réponses

Trop de publicités?

158voto

Ahmet Can Güven avatar
Ahmet Can Güven Points 814

Quelle approche ?

Vous pouvez lire des fichiers audio avec <audio> ou <object> o <embed> . Le chargement paresseux (quand vous en avez besoin) du son est la meilleure approche si sa taille est petite. Vous pouvez créer l'élément audio de façon dynamique, et lorsqu'il est chargé, vous pouvez le lancer à l'aide de la commande .play() et le mettre en pause avec .pause() .

Les choses que nous avons utilisées

Nous utiliserons canplay pour détecter que notre fichier est prêt à être lu.

Il n'y a pas .stop() fonction pour les éléments audio. Nous pouvons seulement les mettre en pause. Et lorsque nous voulons recommencer depuis le début du fichier audio, nous modifions sa fonction .currentTime . Nous utiliserons cette ligne dans notre exemple audioElement.currentTime = 0; . Pour atteindre .stop() nous mettons d'abord le fichier en pause puis réinitialisons son temps.

Nous pouvons vouloir connaître la longueur du fichier audio et le temps de lecture actuel. Nous avons déjà appris .currentTime ci-dessus, pour connaître sa longueur, nous utilisons .duration .

Guide des exemples

  1. Lorsque le document est prêt, nous créons un élément audio de façon dynamique.
  2. Nous définissons sa source avec l'audio que nous voulons lire.
  3. Nous avons utilisé l'événement "terminé" pour relancer le fichier.

Lorsque l'heure actuelle est égale à sa durée, le fichier audio s'arrête. la lecture. Chaque fois que vous utilisez play() il recommencera depuis le début.

  1. Nous avons utilisé timeupdate pour mettre à jour l'heure actuelle lorsque l'audio .currentTime changements.
  2. Nous avons utilisé canplay pour mettre à jour les informations lorsque le fichier est prêt à être lu.

  3. Nous avons créé des boutons pour jouer, faire une 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>

Répondu el 13 de Décembre, 2011 par Ahmet Can Güven (814 Points )

1 votes

Avatar de tbleckert

Et vous devez mettre ce script à la fin de <body>*.

Commenté el 13 de Décembre, 2011 par tbleckert

0 votes

Avatar de stom

aquí est une balise qui fonctionne dans tous les navigateurs .

Commenté el 28 de Juin, 2016 par stom

0 votes

Avatar de Jacques

Très bien, bien que l'OP ait explicitement dit qu'il voulait le faire en jQuery. Dans votre exemple, vous utilisez du javascript pur pour la manipulation des domaines et les écouteurs d'événements.

Commenté el 19 de Octobre, 2018 par Jacques
Afficher 3 autres commentaires

62voto

felwithe avatar
felwithe Points 143 
$("#myAudioElement")[0].play();

Il ne fonctionne pas avec $("#myAudioElement").play() comme on peut s'y attendre. La raison officielle est que l'incorporer dans jQuery ajouterait un play() à chaque élément, ce qui entraînerait une surcharge inutile. Au lieu de cela, vous devez faire référence à cet élément par sa position dans le tableau des éléments du DOM que vous récupérez avec la méthode $("#myAudioElement") , aka 0.

Cette citation est tirée d'un bogue qui a été soumis à ce sujet qui a été fermé comme "feature/wontfix" :

Pour ce faire, nous devons 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, donc il ne semble pas que cela vaille la peine d'utiliser les octets supplémentaires qu'elle prendrait.

Répondu el 24 de Juillet, 2016 par felwithe (143 Points )

23voto

texas-bronius avatar
texas-bronius Points 154

Pour tous ceux qui suivent, j'ai simplement pris la réponse d'Ahmet et mis à jour celle de l'auteur de la demande initiale. jsfiddle ici en substituant :

audio.mp3

pour

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

en faisant un lien avec un mp3 disponible gratuitement sur le web. Merci d'avoir partagé cette solution facile !

Répondu el 28 de Janvier, 2013 par texas-bronius (154 Points )

0 votes

Avatar de Bojan Kogoj

Fonctionne avec Firefox 42 sur Ubuntu

Commenté el 7 de Décembre, 2015 par Bojan Kogoj

1 votes

Avatar de Tom

L'événement de chargement ne se déclenche pas dans cette jsfiiddle dans Chrome. Il n'est lu que grâce à l'attribut autoplay.

Commenté el 24 de Septembre, 2016 par Tom

12voto

André R. Kohl avatar
André R. Kohl Points 45

J'ai ici une solution agréable et polyvalente avec une solution de 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 comme

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"
Répondu el 9 de Juillet, 2014 par André R. Kohl (45 Points )

8voto

Luis David avatar
Luis David Points 349

Qu'en est-il :

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});
Répondu el 29 de Février, 2020 par Luis David (349 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X