10

Gostaria de fazer tocar um áudio em um site. Provavelmente tem de usar a tag <audio> com parâmetros, certo? E depois para apertar o play?

2 Respostas 2

9
<audio controls>
  <source src="meusom.wav" type="audio/wav">
  <source src="meusom.ogg" type="audio/ogg">
  <source src="meusom.mp3" type="audio/mpeg">
  Seu navegador não suporta áudio HTML5. :(
</audio>

Atributos opcionais:

  • autoplay = Começa a tocar o áudio automaticamente;
  • controls = Mostra os controles (volume, pausar/play, etc);
  • loop = define se o áudio deve reiniciar sempre que terminar;
  • preload = define se o áudio deve ser carregado junto com a leitura da página
1

Aqui tem um código com medidor de som bem legal. Você apenas troca o audio.src no código JavaScript e coloca o nome do seu áudio.

<!doctype html>
<html>
<head>
<style type="text/css">
div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }
div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; }
</style>
<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'The Lazy Song.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width,bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
    document.getElementById('audio_box').appendChild(audio);
    context = new webkitAudioContext(); // AudioContext object instance
    analyser = context.createAnalyser(); // AnalyserNode method
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    // Re-route audio playback into the processing graph of the AudioContext
    source = context.createMediaElementSource(audio); 
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
    window.webkitRequestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = '#00CCFF'; // Color of the bars
    bars = 100;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 2);
        //fillRect( x, y, width, height ) // Explanation of the parameters below
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}
</script>
</head>
<body>
    <div id="mp3_player">
        <div id="audio_box"></div>
        <canvas id="analyser_render"></canvas>
    </div>
</body>
</html>

Fonte

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .