Você está aqui: JavaScript ::: Web Audio API ::: Arquivos MP3, WAV, MIDI e outros |
Como tocar música MP3 usando a Web Audio API do JavaScript em suas páginas HTMLQuantidade de visualizações: 579 vezes |
|
Carregar um arquivo MP3 e executá-lo a partir da Web Audio API do JavaScript é uma das primeiras coisas que queremos fazer quando estamos estudando esta API. De fato, carregar um arquivo de áudio e tocá-lo é uma prova de que todas as ferramentas estão funcionando da forma que esperamos. Os passos seguintes envolvem aprofundar nos objetos, interfaces, métodos e funções da Web Audio API. No exemplo abaixo eu mostro como carregar um arquivo MP3 usando a função fetch() do objeto window do JavaScript. Note que temos dois botões. O botão Carregar se encarrega de carregar os dados do arquivo MP3 em um buffer de áudio. O botão Executar, por sua vez, passa esse buffer de áudio para um BufferSource(). Veja o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Tocar música MP3 usando a Web Audio API</title>
</head>
<body>
<h3>Clique o botão Carregar para carregar o arquivo MP3
e aguarde o botão Executar ficar habilitado</h3>
<button id="carregar_btn"
onclick="carregar_mp3()">Carregar</button>
<button id="executar_btn" disabled="disabled"
onclick="iniciar()">Executar</button>
<script language="javascript">
'use strict';
// obter referências para os botões de carregar
// o arquivo MP3 e iniciar a música
var btn_carregar = document.getElementById("carregar_btn");
var btn_executar = document.getElementById("executar_btn");
// vamos declarar o contexto de áudio
var contexto;
// vamos criar o buffer de áudio
var buffer_audio;
// e o nome e endereço do arquivo MP3
var url_arquivo_mp3 = 'musica.mp3';
// vamos criar uma função para carregar
// o arquivo MP3 que queremos executar
function carregar_mp3(){
// vamos criar um objeto AudioContext
var AudioContext = window.AudioContext
|| window.webkitAudioContext;
// e obtemos o contexto de áudio
contexto = new AudioContext();
// vamos usar a função fetch() para carregar o
// o conteúdo do arquivo MP3
window.fetch(url_arquivo_mp3)
.then(response => response.arrayBuffer())
.then(arrayBuffer => contexto.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
// vamos habilitar o botão de iniciar
btn_executar.disabled = false;
buffer_audio = audioBuffer;
});
// vamos desabilitar o botão de carregar
btn_carregar.disabled = true;
}
// função usada para tocar a música MP3
function iniciar(){
// o primeiro passo é criar um BufferSource
var source = contexto.createBufferSource();
// atribuímos ao source o buffer que carregamos
// anteriormente
source.buffer = buffer_audio;
// conectamos a fonte de dados à saída do contexto
source.connect(contexto.destination);
// e começamos a tocar a música
source.start();
}
</script>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
