Comment puis-je lire un fichier audio avec jQuery?

Je vais avoir un moment difficile de se audio de travailler avec jQuery. J'ai essayé avec les deux .wav et .ogg. (Firefox 19.0.2)

Cliquant sur le Démarrer bouton rendements:

TypeError: buzzer.jouer n'est pas une fonction

Je ne sais pas si les sélecteurs jQuery retourner un tableau, mais j'ai essayé de le capturer l'audio fichier avec les deux:

var buzzer = $('buzzer');

et

var buzzer = $('buzzer')[0];

Peu importe, je ne peux pas obtenir les éléments audio à jouer.

<!DOCTYPE html>     
<html>     
    <head>      
    <meta name="viewport" content="width=device-width, initial-scale=1">     
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>    
</head>     

<body>     

<audio id="buzzer" src="buzzer.ogg" type="audio/ogg">Your browser does not support the &#60;audio&#62; element.</audio>    
<form id='sample' action="#" data-ajax="false">    
    <fieldset>    
     <input value="Start" type="submit">    
     </fieldset>    
</form>    
<script type="text/javascript">    

var buzzer = $('buzzer')[0];    

$(document).on('submit', '#sample', function()  {     
    buzzer.play();    
    return false;    
});    

</script>    
</body>    
</html>
Pourquoi voudriez-vous utiliser un formulaire que d'un bouton de démarrage ?
Vous devriez vraiment juste utiliser document.getElementById('buzzer') ici... Vous n'êtes pas vraiment via jQuery-enveloppé éléments, vous êtes juste en prenant le chemin le plus long pour obtenir le natif de l'élément du dom.

OriginalL'auteur BryanWheelock | 2013-04-08

  1. 13

    Vous avez oublié le hachage # dans votre sélecteur d'ID :

    var buzzer = $('#buzzer')[0];  

$(document).on('submit', '#sample', function()  {     
    buzzer.play();    
    return false;    
});

    Et document.getElementById('buzzer') semble plus approprié!

    J'avais modifier le code HTML:

    <audio id="buzzer" src="buzzer.ogg" type="audio/ogg"></audio>    
<input type="button" value="Start" id="start" />

    et à faire:

    $('#start').on('click', function() {
    $('#buzzer').get(0).play();
});
    Ou $('#buzzer')[0].play(); avec une belle event.preventDefault();

    OriginalL'auteur adeneo

  2. 0
    var buzzer = document.getElementById("buzzer");

    Vous pouvez également le faire:

    var buzzer = $('audio')[0];

    Et si l'id buzzer est unique (Comme il se doit) vous pouvez également le faire - pas besoin de [0]

    var buzzer = $('#buzzer');
    document.getElementById("buzzer"); et btw, déjà suggéré par @adeneo
    vrai....
    même après les modifications, il ne fonctionnera pas comme suggéré par vous, vous avez Elements au lieu de Element
    $('audio')[0] n'est pas la meilleure approche, je voudrais aller de l'élément ID

    OriginalL'auteur Mohammad Adil

  3. 0

    Vous êtes en utilisant l'identité de marque de votre balise audio dans votre code HTML. Donc,vous devez ajouter # lorsque vous utilisez le sélecteur.

    var buzzer = $('#buzzer')[0];

    en outre, vous êtes à l'aide de l'id pour identifier votre audio, vous pouvez également définir vos précieux comme ceci:

    var buzzer = $('#buzzer');

    n'avez pas à ajouter de l' [0],[0] signifie que vous obtenez le premier élément.

    OriginalL'auteur athanzhang