Tocando áudio com Javascript?

Estou fazendo um jogo com HTML5 e Javascript.

Como eu reproduzia o áudio do jogo via Javascript?

Se você não quiser mexer com elementos 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>

Isso usa a HTMLAudioElementinterface, que reproduz o áudio da mesma maneira que o <audio>elemento .

Se você precisar de mais funcionalidades, usei a biblioteca howler.js e achei simples e útil.

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

É fácil, basta pegar seu audioelemento e chamar o play()método:

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

Confira este exemplo: http://www.storiesinflight.com/html5/audio.html

Este site revela alguns dos outros coisas legais que você pode fazer, como load(), pause(), e algumas outras propriedades do audioelemento.

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

O SoundManager 2 fornece uma API fácil de usar que permite que o som seja reproduzido em qualquer navegador moderno, incluindo o IE 6+. Se o navegador não suportar HTML5, ele recebe ajuda do flash. Se você deseja estritamente HTML5 e sem flash, há uma configuração para isso,preferFlash=false

Ele suporta áudio 100% livre de flash no iPad, iPhone (iOS4) e outros dispositivos habilitados para HTML5 + navegadores

O uso é tão simples quanto:

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

Aqui está uma demonstração disso em ação: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Esta é uma pergunta bastante antiga, mas quero adicionar algumas informações úteis. O iniciador de tópicos mencionou que ele é "making a game". Portanto, para todos que precisam de áudio para o desenvolvimento de jogos, há uma escolha melhor do que apenas uma <audio>tag ou uma HTMLAudioElement. Eu acho que você deve considerar o uso da API de áudio da Web :

Embora o áudio na Web não exija mais um plug-in, a tag de áudio traz limitações significativas para a implementação de jogos sofisticados e aplicativos interativos. A API de áudio da Web é uma API JavaScript de alto nível para processar e sintetizar áudio em aplicativos da web. O objetivo desta API é incluir recursos encontrados nos modernos mecanismos de áudio de jogos e algumas das tarefas de mixagem, processamento e filtragem encontradas nos aplicativos modernos de produção de áudio de desktop.

Fácil com o Jquery

// define tags de áudio sem pré-carregamento

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

// adiciona o jquery ao carregamento

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

// escreve métodos para tocar e parar

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

// decide como controlar o áudio

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

EDITAR

Para responder à pergunta de @ stomy, eis como você usaria essa abordagem para reproduzir uma lista de reprodução :

Defina suas músicas em um objeto:

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

Use as funções trigger e play como antes:

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

Carregue a primeira música dinamicamente:

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

Redefina a fonte de áudio para a próxima música na lista de reprodução, quando a música atual terminar:

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

Veja aqui um exemplo deste código em ação.

Adicione um áudio oculto e reproduza-o.

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

Se você estiver recebendo o seguinte erro:

DOMException não capturado (prometido): play () falhou porque o usuário não interagiu com o documento primeiro.

Isso significa que o usuário precisa interagir primeiro com o site (como diz a mensagem de erro). Nesse caso, você precisa usar clickou apenas outro ouvinte de evento, para que o usuário possa interagir com seu site.

Se você deseja carregar automaticamente o áudio e não deseja que o usuário interaja com o documento primeiro, você pode usá-lo setTimeout.

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

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

O som começará após 0,5 segundo.

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

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

Solução bastante simples se você tiver uma tag HTML como abaixo:

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

Basta usar o JavaScript para reproduzi-lo, assim:

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

Tive alguns problemas relacionados ao retorno do objeto de promessa de áudio e outros relacionados à interação do usuário com sons. Acabo usando esse pequeno objeto,

Eu recomendaria implementar os sons de reprodução mais próximos do evento de interação que o usuário está usando.

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

E implemente-o da seguinte maneira:

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

Eu usei esse método para tocar um som ...

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

se você quiser reproduzir seu áudio sempre que a página for aberta, faça o seguinte.

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

e chame isso de playMusic () sempre que precisar no código do jogo.

Com os requisitos de segurança de que um usuário deve interagir com uma página da Web para permitir o áudio, é assim que eu faço, com base na leitura de muitos artigos, inclusive neste site

1. Defina os arquivos de áudio necessários no seu html
2. Tenha um botão de jogo inicial com um clique
3. Quando o botão é clicado, reproduza e pause TODOS os arquivos de áudio da barra que você deseja reproduzir no início

Como todos os arquivos de áudio foram "reproduzidos" no mesmo OnClick, agora você pode reproduzi-los a qualquer momento no jogo, sem restrições

Observe que, para melhor compatibilidade, não use arquivos wav, o MS não os suporta

Use mp3 e ogg, que abrange todos os dispositivos

Exemplo:

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

repita conforme necessário para todo o áudio do jogo

Então:

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

repita conforme necessário, exceto não interrompa o áudio que deseja ouvir quando o jogo iniciar

Você pode usar a API de áudio da Web para reproduzir sons. Existem algumas bibliotecas de áudio por aí, como howler.js, soundjs etc. Se você não se preocupa com navegadores antigos, também pode verificar em http://musquitojs.com/ . Ele fornece uma API simples para criar e reproduzir sons.

Por exemplo, para reproduzir um som, tudo o que você precisa fazer é.

import $buzz from 'musquito';

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

buzz.play();

A biblioteca também suporta Sprites de áudio.

Este é um JS que eu criei em um projeto de AI do bebê no qual estou trabalhando. Espero que isso seja capaz de ajudá-lo.

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

Apenas use isto:

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

Ou, para simplificar:

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

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

</video>

Amostra:

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

Não tem idéia se isso funcionar em outros navegadores que não sejam o Chrome 73 !!

Eu tive alguns problemas com a reprodução de áudio, principalmente porque o Chrome atualizou que o usuário precisa interagir primeiro com o documento.

No entanto, em quase todas as soluções que encontrei, o código JS precisa definir ativamente os ouvintes (por exemplo, cliques no botão) para receber eventos do usuário para reproduzir o áudio.

No meu caso, eu só queria que meu jogo jogasse BGM assim que o jogador interage com ele, então me tornei um ouvinte simples que fica checando se a página da web está sendo interagida ou não.

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 )

Aqui está uma solução para o ano de 2020 quando você estiver vendo o erro:

[Erro] Rejeição de promessa não tratada: NotSupportedError: A operação não é suportada. (função anônima) rejectPromise play (função anônima) (testaudio.html: 96) dispatch (jquery-3.4.1.min.js: 2: 42577)

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

Não seja esperto e pense que ooh é uma velha escola oclick, apenas moverei a página para o meu jQuery ou meu arquivo JavaScript externo. Não. Precisa ser um onclick.