Tengo un pequeño problema de diseño y ejecución del reproductor de audio. Mayormente la codificación se realizó para Firefox, pero en Chrome no se reproduce, tampoco el diseño, el cual se pierde.
Código
var audio = new Audio();
audio.src = 'audio.mp3';
audio.controls = true;
audio.loop = false;
audio.autoplay = true;
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
window.addEventListener("load", initMp3Player, false);
function initMp3Player() {
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext();
analyser = context.createAnalyser();
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
function frameLooper() {
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FFF';
bars = 100;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 5);
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
* {
margin: 0;
padding: 0;
}
div#mp3_player {
float: left;
width: 290px;
height: 65px;
background: #000;
padding: 5px;
}
div#mp3_player>div>audio {
width: 270px;
background: #000;
float: left;
}
div#mp3_player>canvas {
width: 270px;
height: 20px;
background: #002D3C;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Hoja y script del reproductor audio-->
<link rel="stylesheet" type="text/css" href="audio.css">
<script type="text/javascript" src="audio.js"></script>
</head>
<body>
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>
</body>
</html>
La parte:
context = new webkitAudioContext();
se cambió a:
context = new AudioContext();
pero aun así no funciona. También sucede en los dispositivos móviles usando Chrome.
- ¿Cuál sería la solución en los navegadores de sobremesa y dispositivos móviles?.
- Aparte del formato MP3, ¿cómo integraría otros formatos OGG y WAV?
Gracias.