Tocando áudio com Javascript?

690

Estou fazendo um jogo com HTML5 e Javascript.

Como eu reproduzia o áudio do jogo via Javascript?

Ryan S.
fonte
9
Desde que é html5, há <audio>. Esse elemento terá JS ganchos apropriados para 'play', 'pause', etc ...
Marc B
1
@ Marc Bem, você poderia fornecer algumas informações sobre o que são esses ganchos?
Ryan S.
14
Aposto que você está se perguntando onde a documentação é para todos os métodos de áudio: stackoverflow.com/questions/4589451/...
Bryan Downing

Respostas:

1327

Se você não quiser mexer com elementos HTML:

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

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.

Uri
fonte
9
Este método funciona para reproduzir mp3, mas não para arquivos wav. Existe alguma maneira de reproduzir arquivos wav?
user781486
12
@ user3293156 Este método suporta os mesmos formatos que os HTML5 <audio>. A Wikipedia possui uma tabela de compatibilidade de formatos de áudio . new Audio()pode reproduzir arquivos WAV em todos os navegadores, exceto no Internet Explorer.
Rory O'Kane
281
@ RoryO'Kane para que todos possam reproduzir o formato de áudio da microsoft, exceto a microsoft? rsrs
Dave Cousineau
10
Algumas advertências: (1) O Firefox não toca mp3 . Você precisará de um arquivo ogg. (2) O Safari / iOS não será reproduzido se você estiver veiculando o conteúdo por https . Você precisará ter um certificado válido.
Peter
9
Observe que a partir de abril de 2018 no Chrome não reproduzirá arquivos de áudio, a menos que o usuário tenha pelo menos clicado uma vez no documento. Veja aqui .
Nils Lindemann
181

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

Shanabus
fonte
38

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/

LordZardeck
fonte
3
Geralmente, quando você fornece um link neste site, fornece algumas informações a partir do link em sua postagem. É desencorajado apenas postar um link simples e dizer "clique aqui".
23712 Ryan S.
7
Desculpe, achei que o site se explicaria. Vou editá-lo então
LordZardeck 23/02
32

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.

Konstantin Smolyanin
fonte
22

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.

Cibernético
fonte
Isso reproduz todas as tags de áudio com class = "my_audio" ao mesmo tempo. Como você joga um após o outro (em uma lista de reprodução)?
stomy
@stomy você publicou isso como sua própria pergunta no StackOverflow? Se você me avisar. Eu poderia ajudá-lo com isso. caso contrário, eu ofereço isso - você pode (depois de começar a tocar uma música) ouvir o endedevento a ser emitido e iniciar o próximo arquivo de áudio na lista (presumivelmente você está acompanhando o DOM, a memória JS, etc.) ) developer.mozilla.org/pt-BR/docs/Web/Events/ended
Sgnl
@stomy, verifique a edição na minha resposta para criar uma lista de reprodução que reproduz músicas consecutivamente.
Cibernética
15

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);
}
Rey
fonte
14

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.

Reza Saadati
fonte
Isso não funciona. Não no Chrome. Não mais.
Arfeo 24/04
11
new Audio('./file.mp3').play()
Maxmaxmaximus
fonte
5
var song = new Audio();
song.src = 'file.mp3';
song.play();
mamadaliev
fonte
código fácil e funcional.
Arsh Khan 16/03
5

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();
Ben Stafford
fonte
Você queria usar </a> ou </audio>. Apenas curioso.
Cooper
Eu usei a tag <audio>.
Ben Stafford
1
Ben, seu exemplo tinha uma tag de fechamento incorreta e foi por isso que @Cooper fez essa pergunta. Editei a resposta com a tag de fechamento correta.
Sgnl
4

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>
talsibony
fonte
Não estou trabalhando no Safari se eu acionar a reprodução automática do JS.
maki10
1
@ maki10 Oi, eu testei no ambiente de trabalho safari Versão 12.0.3 (14606.4.5) e ele funciona aqui: jsfiddle.net/xf5zyv4q/5
talsibony
Também funciona no safari móvel IOS 12
talsibony
Eu atualizo o link para o meu problema jsfiddle.net/6431mfb5 . Para mim, a reprodução automática funciona apenas pela primeira vez no safari e mais novas.
maki10
@ maki10 porque você o chama sem interação do usuário, a reprodução automática não funciona sem a interação do usuário, como clique em toque, remova a última linha: soundPlayer.play (' interactive-examples.mdn.mozilla.net/media/examples/… );
talsibony
3

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();
Bilal Soomro
fonte
2

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.

Suhani Mendapara
fonte
2

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

Phil Allen
fonte
1

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.

VJAI
fonte
0

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>
Urihel Coleman
fonte
0

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 SOU ESPERTO
fonte
Esta é uma resposta fácil e limpa. Sem jquery!
IMSMART 03/04/19
0

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 )
Danny
fonte
0

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.

William Entriken
fonte