Question Jouer de l'audio avec Javascript?


Je fais un jeu avec HTML5 et Javascript.

Comment pourrais-je jouer au jeu audio via Javascript?


472
2018-02-23 18:49


origine


Réponses:


Si vous ne voulez pas gâcher les éléments HTML:

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

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

Si vous avez besoin de plus de fonctionnalités, j'ai utilisé le Howler.js bibliothèque et l'a trouvé simple et utile.


952
2017-09-05 05:03



C'est facile, prenez votre audio élément et appelez le play() méthode:

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

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

Ce site découvre quelques-unes des autres choses cool que vous pouvez faire comme load(), pause(), et quelques autres propriétés du audio élément.


162
2018-02-23 18:53



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

SoundManager 2 fournit une API facile à utiliser qui permet de lire le son dans tout 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 l'audio 100% Flash sur iPad, iPhone (iOS4) et autres appareils compatibles HTML5 + navigateurs

L'utilisation est aussi simple que:

<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 en action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/


34
2018-02-23 18:50



C'est une question assez ancienne mais je veux ajouter des informations utiles. Le sujet a mentionné qu'il est "making a game". Donc, pour tout le monde qui a besoin de l'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 la API Web Audio:

Bien que l'audio sur le Web ne nécessite plus de plug-in, la balise audio présente des limites importantes pour la mise en œuvre de jeux sophistiqués et d'applications interactives. L'API Web Audio 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 fonctionnalités des moteurs audio de jeu modernes et certaines des tâches de mixage, de traitement et de filtrage des applications de production audio de bureau modernes.


23
2018-05-30 20:09



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

$(".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écide 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 vous utiliseriez cette approche pour jouer un 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 trigger et play comme précédemment:

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

Chargez le premier morceau de manière dynamique:

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

Réinitialiser la source audio à la chanson suivante dans la liste de lecture, lorsque la chanson 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');
});

Voir ici pour un exemple de ce code en action.


16
2017-11-15 18:27



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

8
2018-04-01 07:07



Ajoutez un son caché et lisez-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);
}

6
2017-08-05 19:51



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();

3
2018-02-27 14:35



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();

1
2017-07-04 04:54



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

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

et appelez ce playMusic () quand vous en avez besoin dans votre code de jeu.


1
2018-02-09 10:26