Lecture audio avec Javascript?


691

Je fais un jeu avec HTML5 et Javascript.

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


9
Comme c'est html5, il y en a <audio>. Cet élément aura des crochets JS appropriés pour 'jouer', 'pause', etc ...
Marc B

1
@Marc Pourriez-vous fournir des informations sur ce que sont ces crochets?
Ryan

14
Je parie que vous vous demandez où se trouve la documentation pour toutes les méthodes audio: stackoverflow.com/questions/4589451/…
Bryan Downing

Réponses:


1330

Si vous ne voulez pas jouer avec les éléments HTML:

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

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.


9
Cette méthode fonctionne pour la lecture de mp3 mais pas pour les fichiers wav. Existe-t-il un moyen de lire des fichiers wav?
user781486

12
@ user3293156 Cette méthode prend en charge les mêmes formats que HTML5 <audio>. Wikipedia a une table de compatibilité de format audio . new Audio()peut lire des fichiers WAV dans tous les navigateurs sauf Internet Explorer.
Rory O'Kane

283
@ RoryO'Kane pour que tout le monde puisse lire le format audio de microsoft sauf microsoft? lol
Dave Cousineau

10
Quelques mises en garde: (1) Firefox ne lira pas les mp3 . Vous aurez besoin d'un fichier ogg à la place. (2) Safari / iOS ne sera pas lu si vous diffusez le contenu via https . Vous devrez avoir un certificat valide.
Peter

9
Notez qu'à partir d'avril 2018, Chrome ne lira pas les fichiers audio sauf si l'utilisateur a au moins cliqué une fois dans le document. Voyez ici .
Nils Lindemann

181

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.


38

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/


3
Généralement, lorsque vous donnez un lien sur ce site Web, vous fournissez des informations à partir du lien dans votre message. Il est déconseillé de publier un simple lien et de dire "cliquez ici".
Ryan

7
Désolé, je pensais que le site s'expliquerait. Je le modifierai alors
LordZardeck

32

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.


22

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.


Cela lit toutes les balises audio avec class = "my_audio" en même temps. Comment jouez-vous les uns après les autres (dans une liste de lecture)?
stomie

@stomy avez-vous posté cela comme sa propre question sur StackOverflow? Si oui, fais moi le savoir. Je pourrais t'aider avec ça. sinon, je vais offrir ceci - vous pouvez (après avoir commencé à jouer une chanson) écouter leended événement à émettre et démarrer le prochain fichier audio dans la liste (probablement vous gardez une trace soit dans le DOM, la mémoire JS, etc. ). developer.mozilla.org/en-US/docs/Web/Events/ended
Sgnl

@stomy veuillez vérifier l'EDIT dans ma réponse pour créer une liste de lecture qui joue des chansons consécutivement.
Cybernetic

15

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

14

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.


Ça ne marche pas. Pas dans Chrome. Plus maintenant.
Arfeo



5

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

Vouliez-vous utiliser </a> ou </audio>. Juste curieux.
Cooper

J'ai utilisé la balise <audio>.
Ben Stafford

1
Ben, votre exemple avait une balise de fermeture incorrecte, c'est pourquoi @Cooper avait posé cette question. J'ai édité la réponse avec la balise de fermeture correcte.
Sgnl

4

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>

Ne fonctionne pas sur un Safari si je déclenche la lecture automatique à partir de JS.
maki10

1
@ maki10 Salut, je l'ai testé dans safari desktop version 12.0.3 (14606.4.5) et cela fonctionne ici: jsfiddle.net/xf5zyv4q/5
talsibony


Je mets à jour le lien pour mon problème jsfiddle.net/6431mfb5 . Pour moi, la lecture automatique ne fonctionne que la première fois en safari et plus récemment.
maki10

@ maki10 parce que vous l'appelez sans interaction avec l'utilisateur, la lecture automatique ne fonctionnera pas sans interaction de l'utilisateur comme click touch, supprimez la dernière ligne: soundPlayer.play (' interactive-examples.mdn.mozilla.net/media/examples/… );
talsibony

3

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

2

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.


2

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


1

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.


0

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>

0

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


C'est une réponse simple et claire. Pas du tout jquery !!
IMSMART

0

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 )

0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.