Lecture audio avec Javascript?

C'est facile, il suffit d'obtenir votre élément audio et d'appeler la méthode play():

document.getElementById('yourAudioTag').play();

Découvrez cet exemple: http://www.storiesinflight.com/html5/audio.html

Ce site, dévoile certaines des autres choses cool que vous pouvez faire comme load(), pause(), et quelques autres propriétés de la audio élément.

Http://www.schillmania.com/projects/soundmanager2/

SoundManager 2 fournit une API facile à utiliser qui permet de lire le son dans n'importe quel navigateur moderne, y compris IE 6+. Si le navigateur ne prend pas en charge HTML5, il reçoit l'aide de flash. Si vous voulez strictement HTML5 et pas de flash, il y a un paramètre pour cela, preferFlash=false

Il prend en charge 100% audio sans Flash sur iPad, iPhone (iOS4) et autres appareils compatibles HTML5 + navigateurs

L'utilisation est aussi simple comme:

<script src="soundmanager2.js"></script>
<script>
    // where to find flash SWFs, if needed...
    soundManager.url = '/path/to/swf-files/';

    soundManager.onready(function() {
        soundManager.createSound({
            id: 'mySound',
            url: '/path/to/an.mp3'
        });

        // ...and play it
        soundManager.play('mySound');
    });
</script>

En voici une démonstration en action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

C'est une question assez ancienne mais je veux ajouter quelques informations utiles. Le sujet démarreur a mentionné qu'il est "making a game". Donc, pour tous ceux qui ont besoin d'audio pour le développement de jeux, il y a un meilleur choix que juste un <audio> tag ou un HTMLAudioElement. Je pense que vous devriez envisager l'utilisation de l'API Web Audio :

Bien que l'audio sur le web ne nécessite plus de plugin, la balise audio apporte des limitations importantes pour la mise en œuvre de jeux sophistiqués et d'applications interactives. Web Audio API est une API JavaScript de haut niveau pour le traitement et la synthèse audio dans les applications Web. L'objectif de cette API est d'inclure les fonctionnalités trouvées dans les moteurs audio de jeu modernes et certaines des tâches de mixage, de traitement et de filtrage que l'on trouve dans les applications de production audio de bureau modernes.

Facile avec Jquery

// définir des balises audio sans précharge

<audio class="my_audio" controls preload="none">
    <source src="audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

// ajouter jquery au chargement

$(".my_audio").trigger('load');

// écrire des méthodes pour jouer et arrêter

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

// décidez comment contrôler l'audio

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

MODIFIER

Pour répondre à la question de @stomy, voici comment utiliser cette approche pour jouer une playlist:

Définissez vos chansons dans un objet:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

Utilisez les fonctions de déclenchement et de lecture comme avant:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

Charger la première chanson dynamiquement:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

Réinitialisation de la source audio à la chanson suivante dans la liste de lecture, lorsque la chanson se termine:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

Voir ici pour un exemple de ce code dans l'action.

new Audio('./file.mp3').play()

Ajoutez un son caché et jouez-le.

function playSound(url){
  var audio = document.createElement('audio');
  audio.style.display = "none";
  audio.src = url;
  audio.autoplay = true;
  audio.onended = function(){
    audio.remove() //Remove when played.
  };
  document.body.appendChild(audio);
}

Solution assez simple si vous avez une balise HTML comme ci-dessous:

<audio id="myAudio" src="some_audio.mp3"></audio>

Utilisez simplement JavaScript pour le lire, comme ceci:

document.getElementById('myAudio').play();

Si vous obtenez l'erreur suivante:

Uncaught (promettre) DOMException: jouer() a échoué car l'utilisateur n'a pas interagi avec le document en premier.

Cela signifie que l'utilisateur doit d'abord interagir avec le site Web (comme le dit le message d'erreur). Dans ce cas, vous devez utiliser click ou simplement un autre écouteur d'événement, afin que l'utilisateur puisse interagir avec votre site Web.

Si vous souhaitez charger automatiquement l'audio et ne veulent pas de l'utilisateur pour interagir avec le document tout d'abord, vous pouvez utiliser setTimeout.

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)

<audio id="mySound" src="sound.mp3"></audio>

Le son commencera après 0,5 seconde.

J'ai utilisé cette méthode pour jouer un son...

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();

Si vous voulez lire votre audio chaque fois que la page est ouverte, faites comme ceci.

<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>

Et appelez cette playMusic() chaque fois que vous en avez besoin dans votre code de jeu.

var song = new Audio();
song.src = 'file.mp3';
song.play();

Vous pouvez utiliser l'API Web Audio pour lire des sons. Il y a pas mal de bibliothèques audio là-bas comme hurleur.js, soundjs etc. Si vous ne vous inquiétez pas des anciens navigateurs, vous pouvez également vérifier http://musquitojs.com / . Il fournit une API simple pour créer et jouer des sons.

Par exemple, pour jouer un son tout ce que vous avez à faire est.

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

La bibliothèque prend également en charge les Sprites audio.