HTML5 Audio Analyser Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Audio Analyser Yapımı

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(1925)
RAPOR ET
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ü :

http://ustaderslik.com/resim/ders/7f78df4d54.png

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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol