Comment lire l'audio ?

Question

Je réalise un jeu avec HTML5 et JavaScript.

Comment puis-je lire le son du jeu via JavaScript ?

Answer 1

Si vous ne voulez pas vous embêter avec les éléments HTML :

var audio = new Audio('audio_file.mp3');
audio.play();

function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
  audio.play();
}

<button onclick="play()">Play Audio</button>

Cela utilise le HTMLAudioElement qui lit l'audio de la même manière que l'interface <audio> élément .

---

Si vous avez besoin de plus de fonctionnalités, j'ai utilisé le howler.js et l'ont trouvé simple et utile.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

Answer 2

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

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

Regardez cet exemple : http://www.storiesinflight.com/html5/audio.html

Ce site découvre d'autres choses sympas que vous pouvez faire, telles que load() , pause() et quelques autres propriétés de la audio élément.

Answer 3

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

SoundManager 2 fournit une API facile à utiliser qui permet de jouer du son dans n'importe quel navigateur moderne, y compris IE 6+. Si le navigateur ne supporte pas HTML5, il est aidé par Flash. Si vous voulez strictement du HTML5 et pas de flash, il y a un paramètre pour cela, preferFlash=false

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

L'utilisation est aussi simple que cela :

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

Voici une démo de ce système en action : http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Answer 4

Il s'agit d'une question assez ancienne mais je souhaite ajouter quelques informations utiles. L'auteur du sujet a mentionné qu'il est "making a game" . Ainsi, pour tous ceux qui ont besoin de l'audio pour le développement de jeux, il existe un meilleur choix qu'un simple lecteur de DVD. <audio> ou une balise HTMLAudioElement . Je pense que vous devriez envisager l'utilisation de la API Audio Web :

Si 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. L'API audio Web est une API JavaScript de haut niveau pour le traitement et la synthèse de l'audio dans les applications Web. L'objectif de cette API est d'inclure les capacités des moteurs audio des jeux modernes et certaines des tâches de mixage, de traitement et de filtrage que l'on trouve dans les applications modernes de production audio de bureau.

Answer 5

Facile avec Jquery

// définir les balises audio sans préchargement

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

// ajout de jquery pour le chargement

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

// écrire des méthodes pour jouer et s'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écider comment contrôler l'audio

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

EDITAR

Pour répondre à la question de @stomy, voici comment vous utiliseriez cette approche pour jouer une liste de lecture :

Placez 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 auparavant :

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

Chargement dynamique de la première chanson :

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

Réinitialise la source audio au morceau suivant de la liste de lecture, lorsque le morceau en cours 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');
});

Véase ici pour un exemple de ce code en action.