Bu dersimizde html5 ile audiolar için analyser yapacağız.Analyser ne diye sorarsanız,müziğin ritmine göre hareket eden barlar.Yapacağımız analyser sadece webkit tarayıcılar için.Yani chrome,yandex,safari için.Başlayalım.
İncele : http://ustaderslik.com/ornek/analyser/
İndir : http://ustaderslik.com/dosya/analyser.rar
Yapacağımız analyserın görüntüsü :
Kodlarımıza geçelim.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
body{background:#f1f1f1;}
.buton{width:170px;height:35px;padding:20px;text-align:center;background:#666;color:#fff;font-size:30px;margin:auto;margin-top:25px;cursor:pointer;}
.alan{width:600px;height:200px;margin:auto;margin-top:50px;
-webkit-animation:ani1 20s infinite alternate;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
}
/*3d dönmesi için bir animasyon.*/
@-webkit-keyframes ani1
{
0%{-webkit-transform: rotateY(0deg);}
25%{-webkit-transform: rotateY(70deg);}
50%{-webkit-transform: rotateY(200deg);}
75%{-webkit-transform: rotateY(-70deg);}
100%{-webkit-transform: rotateY(0deg);}
}
</style>
</head>
<body>
<div class="buton" id="buton" onClick="oynat()">Oynat/Durdur</div>
<div class="alan"> <canvas width="600" height="200" id="analyser"></canvas> </div>
<audio id="audio" style="display:none;">
<source src="Stars Align - Lindsey Stirling (Original Song).mp3"></source>
</audio>
<script type="text/javascript">
var player=document.getElementById("audio");//audio tagını seçiyoruz.
function oynat(){//oynat fonksiyonu çağırılırsa
if (player.paused) {//müzik çalmıyorsa
player.play();//çal
}else{
player.pause();//çalıyorsa durdur.
}
}
var canvas,cizim, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height,s=0;//kullanacağımız değişkenler
window.addEventListener("load",yuklendi, false);//sayfa yüklendiğinde.yuklendi fonksiyonunu çağır.
function yuklendi(){
context = new webkitAudioContext(); //webkit tarayıcılar için audio yarat
analyser = context.createAnalyser(); //yarattığımız audioya analyser yarat
canvas = document.getElementById('analyser');//canvasa eriş
cizim = canvas.getContext('2d');//2d çizim yapacağımız diyoruz.
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);//analyser ayarları
Analyser();//ve asıl çizim fonksiyonumuz olan analyser donksiyonunu çağırıyoruz.
}
function Analyser(){
window.webkitRequestAnimationFrame(Analyser);//Bu fonksiyonu animasyonlu olduğunu söylüyoruz.Bu şekilde saniyede 60 kez çalışacak.
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
cizim.clearRect(0, 0, canvas.width, canvas.height); //canvas yani tuvalimizi temizliyoruz.
if(s==0){//sürekli renk değişmesi için ufak bir kontrol
var r=Math.floor((Math.random()*255)+0),g=Math.floor((Math.random()*255)+0),b=Math.floor((Math.random()*255)+0);
document.getElementById('buton').style.background='rgb('+r+','+g+','+b+')';
s=30;
}
cizim.fillStyle = 'rgb('+r+','+g+','+b+')'; //rengimizi belirliyoruz.
bars =85;//bar sayısı
for (var i = 0; i < bars; i++) {//bar sayısı kadar döngü yapıyoruz.
bar_x = i * 7;//barlar rası boşluk
bar_width = 5;//bar genişliği
bar_height = -(fbc_array[i] / 2);//bar yüksekliği
cizim.fillRect(bar_x, canvas.height, bar_width, bar_height);//barları ciziyoruz.
}
s--;
}
</script>
</body>
</html>
Kodların yanına açıklamalarını yaptım.Bizim için önemli olan yuklendi ve Analyser fonksiyonları.Bu fonksiyonlarda ufak değişiklikler yaparak kullanabilirsiniz.
UstaDerslik
