Lecture audio avec Javascript?

Je fais un jeu avec HTML5 et Javascript.

Comment pourrais-je jouer l'audio du jeu via Javascript?

Si vous ne voulez pas jouer 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/examples/t-rex-roar.mp3');
  audio.play();
}

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

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

Si vous avez besoin de plus de fonctionnalités, j'ai utilisé la bibliothèque howler.js et je l' ai trouvée 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/examples/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

C'est simple, récupérez simplement votre audioélément et appelez la play()méthode:

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

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

Ce site révèle quelques - unes des autres choses cool que vous pouvez faire, comme load(), pause()et quelques autres propriétés de l' 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 obtient de l'aide de Flash. Si vous voulez strictement HTML5 et pas de flash, il existe un paramètre pour cela,preferFlash=false

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

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>

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 a indiqué 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 qu'un simple <audio>tag ou un HTMLAudioElement. Je pense que vous devriez envisager l'utilisation de l' API Web Audio :

Alors 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. L'API Web Audio est une API JavaScript de haut niveau pour le traitement et la synthèse audio dans les applications Web. Le but de cette API est d'inclure des capacité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 modernes de production audio de bureau.

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>

// ajoute jquery à charger

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

// écrit 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>

ÉDITER

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

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 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 la première chanson dynamiquement:

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

Réinitialisez la source audio sur la chanson suivante de la liste de lecture, à la fin de la chanson en cours:

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.

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

Si vous obtenez l'erreur suivante:

DOMException non capturée (en promesse): play () 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 l'indique le message d'erreur). Dans ce cas, vous devez utiliserclick ou simplement un autre écouteur d'événements, afin que l'utilisateur puisse interagir avec votre site Web.

Si vous souhaitez charger automatiquement l'audio et que vous ne voulez pas que l'utilisateur interagisse d'abord avec le document, 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.

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

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

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 jouer, comme ceci:

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

J'ai eu quelques problèmes liés aux retours d' objets de promesse audio et certains problèmes liés à l'interaction de l'utilisateur avec les sons, je finis par utiliser ce petit objet,

Je recommanderais d'implémenter les sons de jeu les plus proches de l'événement d'interaction utilisé par l'utilisateur.

var soundPlayer = {
  audio: null,
  muted: false,
  playing: false,
  _ppromis: null,
  puse: function () {
      this.audio.pause();
  },
  play: function (file) {
      if (this.muted) {
          return false;
      }
      if (!this.audio && this.playing === false) {
          this.audio = new Audio(file);
          this._ppromis = this.audio.play();
          this.playing = true;

          if (this._ppromis !== undefined) {
              this._ppromis.then(function () {
                  soundPlayer.playing = false;
              });
          }

      } else if (!this.playing) {

          this.playing = true;
          this.audio.src = file;
          this._ppromis = soundPlayer.audio.play();
          this._ppromis.then(function () {
              soundPlayer.playing = false;
          });
      }
  }
};

Et implémentez-le comme suit:

<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>

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 ça.

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

Avec les exigences de sécurité qu'un utilisateur doit interagir avec une page Web pour que l'audio soit autorisé, voici comment je le fais, basé sur la lecture de nombreux articles, y compris sur ce site

1. Définissez les fichiers audio requis dans votre html
2. Avoir un bouton de démarrage de jeu avec un onclick
3. Lorsque le bouton est cliqué, lisez et mettez en pause TOUS les fichiers audio à partir de la barre que vous souhaitez lire au début

Étant donné que tous les fichiers audio ont été "lus" sur le même OnClick, vous pouvez désormais les lire à tout moment dans le jeu sans restrictions.

Notez que pour une meilleure compatibilité n'utilisez pas de fichiers wav, MS ne les prend pas en charge

Utilisez mp3 et ogg, qui couvre tous les appareils

Exemple:

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

répéter au besoin pour tous les fichiers audio du jeu

Alors:

document.getElementById("welcome").play();
document.getElementById("welcome").pause();

répéter au besoin, sauf ne pas mettre en pause l'audio que vous souhaitez entendre lorsque le jeu démarre

Vous pouvez utiliser l'API Web Audio pour jouer des sons. Il existe de nombreuses bibliothèques audio comme howler.js, soundjs etc. Si vous ne vous inquiétez pas des anciens navigateurs, vous pouvez également consulter 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.

Il s'agit de JS avec un projet de bébé AI avec lequel je travaille. j'espère que cela peut vous aider.

<!DOCTYPE html>
<html>
<head>
    <title>
        js prompt AI
    </title>
    <style>
        #button {
            border: 1px solid black;
            border-radius: 10px;
            font-size: 22px;
            height:65px;
            width:100px;
            text-align: center;
            line-height: 65px;
        }
    </style>
</head>
<body>

    <audio id="myAudio" src="./how_are_you.m4a"></audio>
    <p>To Interact with the AI please click the button</p>
    <div id=button>click</div>

    <script>

       var button = document.getElementById("button");
       function playBack() {
           button.addEventListener("click", function (){
            var talk = prompt("If you wish for the AI to respond type hi");
            var myAudio = document.getElementById("myAudio");

            if(talk === "hi") {
                    myAudio.play();
            }
           }) ;



       }
       playBack();
   </script>
</body>

</html>

Utilisez simplement ceci:

<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

Ou, pour simplifier:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

Échantillon:

<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>

N'ayez aucune idée si cela fonctionne sur d'autres navigateurs que Chrome 73 !!

J'ai eu quelques problèmes avec la lecture audio, d'autant plus que Chrome a mis à jour que l'utilisateur doit d'abord interagir avec le document.

Cependant, dans presque toutes les solutions que j'ai trouvées, le code JS doit configurer activement les écouteurs (par exemple, les clics sur les boutons) pour recevoir les événements utilisateur afin de lire l'audio.

Dans mon cas, je voulais juste que mon jeu joue au BGM dès que le joueur interagit avec lui, alors je me suis fait un simple écouteur qui vérifie constamment si la page Web est en interaction ou non.

const stopAttempt = setInterval(() => {
    const audio = new Audio('your_audio_url_or_file_name.mp3');
    const playPromise = audio.play();
    if (playPromise) {
      playPromise.then(() => {
        clearInterval(stopAttempt)
      }).catch(e=>{
        console.log('' + e);
      })
    }
}, 100 )

Voici une solution pour l'année 2020 lorsque vous voyez l'erreur:

[Erreur] Rejet de promesse non géré: NotSupportedError: L'opération n'est pas prise en charge. (fonction anonyme) rejettePromise play (fonction anonyme) (testaudio.html: 96) envoi (jquery-3.4.1.min.js: 2: 42577)

<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>

Ne soyez pas habile et pensez ooh c'est une vieille école oclick, je vais juste le déplacer en bas de la page vers mon jQuery ou mon fichier JavaScript externe. Nan. Ce doit être un onclick.