Lire un fichier audio en utilisant jQuery lorsqu'un bouton est cliqué

Question 1

J'essaie 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 cela aussi.

Question 2

Quelle approche?

Avec vous pouvez lire des fichiers audio <audio>tag ou <object>ou <embed>. Chargement paresseux (chargez 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, une fois chargé, vous pouvez le démarrer .play()et le mettre en pause avec .pause().

Les choses que nous avons utilisées

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

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

Nous souhaitons peut-être connaître la longueur du fichier audio et la durée de lecture actuelle. Nous avons déjà appris .currentTimeci-dessus, pour apprendre sa longueur que nous utilisons .duration.

Guide d'exemple

Lorsque le document est prêt, nous avons créé un élément audio dynamiquement
Nous définissons sa source avec l'audio que nous voulons lire.
Nous avons utilisé l'événement «terminé» pour redémarrer le fichier.

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

Nous avons utilisé l' timeupdateévénement pour mettre à jour l'heure actuelle chaque fois que l'audio .currentTimechange.
Nous avons utilisé l' canplayévénement pour mettre à jour les informations lorsque le fichier est prêt à être lu.
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>

Développer l'extrait

Question 3

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

Cela ne fonctionne pas $("#myAudioElement").play()comme prévu. La raison officielle est que l'incorporer dans jQuery ajouterait une play()méthode à chaque élément, ce qui entraînerait une surcharge inutile. Donc, à la place, vous devez vous y référer par sa position dans le tableau d'éléments DOM que vous récupérez avec $("#myAudioElement"), aka 0.

Cette citation provient d'un bogue qui a été soumis à ce sujet , qui a été 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 multimédias, il ne semble donc pas qu'elle vaille les octets supplémentaires qu'elle prendrait.

Question 4

Pour tous les autres, j'ai simplement pris la réponse d'Ahmet et mis à jour le jsfiddle du demandeur d' origine ici , en le remplaçant:

audio.mp3

pour

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

lien dans un mp3 disponible gratuitement sur le Web. Merci d'avoir partagé la solution facile!

Question 5

J'ai ici une solution agréable et polyvalente avec une solution de secours:

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

Vous pouvez désormais atteindre l'élément audio initialisé où vous le souhaitez avec des appels d'événements simples comme

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

Démonstration JSFiddle

Voici ce que j'utilise avec JQuery:

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

Question 7

Qu'en est-il de:

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

Développer l'extrait

Answer 1

J'essaie 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 cela aussi.

Answer 2

Utilisiez-vous l' audio de HTML5

OnesimusUnbound

Answer 3

Quelle approche?

Avec vous pouvez lire des fichiers audio <audio>tag ou <object>ou <embed>. Chargement paresseux (chargez 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, une fois chargé, vous pouvez le démarrer .play()et le mettre en pause avec .pause().

Les choses que nous avons utilisées

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

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

Nous souhaitons peut-être connaître la longueur du fichier audio et la durée de lecture actuelle. Nous avons déjà appris .currentTimeci-dessus, pour apprendre sa longueur que nous utilisons .duration.

Guide d'exemple

Lorsque le document est prêt, nous avons créé un élément audio dynamiquement
Nous définissons sa source avec l'audio que nous voulons lire.
Nous avons utilisé l'événement «terminé» pour redémarrer le fichier.

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

Nous avons utilisé l' timeupdateévénement pour mettre à jour l'heure actuelle chaque fois que l'audio .currentTimechange.
Nous avons utilisé l' canplayévénement pour mettre à jour les informations lorsque le fichier est prêt à être lu.
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>

Développer l'extrait

Answer 4

1

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

tbleckert

Answer 5

voici un balisage qui fonctionne principalement dans tous les navigateurs .

shaijut

Answer 6

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

Jacques

Answer 7

J'ai un problème avec cet extrait: comment puis-je arrêter automatiquement l'audio lorsque le mp3 est terminé? maintenant, avec mon audio très court, cela continue à sonner en boucle

Domenico Monaco

Answer 8

1

@DomenicoMonaco Supprimez simplement l' endedévénement qui lit l'audio depuis le début.

Ahmet Can Güven

Answer 9

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

Cela ne fonctionne pas $("#myAudioElement").play()comme prévu. La raison officielle est que l'incorporer dans jQuery ajouterait une play()méthode à chaque élément, ce qui entraînerait une surcharge inutile. Donc, à la place, vous devez vous y référer par sa position dans le tableau d'éléments DOM que vous récupérez avec $("#myAudioElement"), aka 0.

Cette citation provient d'un bogue qui a été soumis à ce sujet , qui a été 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 multimédias, il ne semble donc pas qu'elle vaille les octets supplémentaires qu'elle prendrait.

Answer 10

3

Je vous remercie! Exactement ce que je cherchais!

utdrmac

Answer 11

21

Pour tous les autres, j'ai simplement pris la réponse d'Ahmet et mis à jour le jsfiddle du demandeur d' origine ici , en le remplaçant:

audio.mp3

pour

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

lien dans un mp3 disponible gratuitement sur le Web. Merci d'avoir partagé la solution facile!

texas-bronius
la source

Fonctionne sur Firefox 42 sur Ubuntu

Bojan Kogoj

1

L'événement de chargement ne se déclenche pas dans ce jsfiiddle dans Chrome. Il ne joue qu'à cause de l'attribut de lecture automatique.

Tom

Answer 12

Fonctionne sur Firefox 42 sur Ubuntu

Bojan Kogoj

Answer 13

1

L'événement de chargement ne se déclenche pas dans ce jsfiiddle dans Chrome. Il ne joue qu'à cause de l'attribut de lecture automatique.

Tom

Answer 14

J'ai ici une solution agréable et polyvalente avec une solution de secours:

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

Vous pouvez désormais atteindre l'élément audio initialisé où vous le souhaitez avec des appels d'événements simples comme

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Answer 15

Démonstration JSFiddle

Voici ce que j'utilise avec JQuery:

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

Answer 16

4

Qu'en est-il de:

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

Développer l'extrait

Luis David
la source

c'est le moyen le plus simple, fonctionne comme un charme et vous pouvez déclencher cette même action en utilisant des événements vanilla js si vous le souhaitez.

Andrea Mauro

Answer 17

c'est le moyen le plus simple, fonctionne comme un charme et vous pouvez déclencher cette même action en utilisant des événements vanilla js si vous le souhaitez.

Andrea Mauro

Lire un fichier audio en utilisant jQuery lorsqu'un bouton est cliqué

Réponses:

Quelle approche?

Les choses que nous avons utilisées

Guide d'exemple