 |
|
||||
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: 410 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:
<!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))
|
 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 |
|
Java - Como retornar a hora atual em Java usando um objeto da classe Calendar - Datas e Horas em Java Fórmulas da Física - Fórmula da Velocidade - Como calcular a velocidade quando temos a distância percorrida e o tempo gasto |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
