In your Windows Desktop create a folder name it 'audio' and create a sub folder name it 'music' this is for your music folder.
Inside your audio root folder, create a html file name it 'index.html' open index.html with your favorite editor and pop this code in.
<!doctype html>
<html>
<head>
<style type="text/css">
h3{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14pt;
color: navy;
padding-top: 12px;
padding-bottom: 3px;
}
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>
var audio = new Audio();
audio.src = '/music/Your MP3 file name here'; //Change this to your MP3 file name
audio.controls = true;
audio.loop = true;
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 webkitAudioContext();
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.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 = '#ff3300'; // 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);
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
</script>
</head>
<body>
<center><h3>Tek Komunity<br />
Audio API</h3>
</center>
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>
</body>
</html>
Save it make sure you place your MP3 file name in audio.src =
java script.
if you have problems, in windows use this dir C:\Users\<your username>\Desktop\audio\music\
Open your index.html in google chrome.
Enjoy!!!
No comments:
Post a Comment