HTML ARKAPLANA MÜZİK EKLEME

Web Sayfalarımızda, Sitemize Gelen ziyaretçilere Müzik Dinletmek İsteyebiliriz. Müzik, web sitesine uygun olmalıdır . Müzisyenlere ve müzik severlere müzik keyfini verecekseniz hedef kitlenin müzik türü olduğunu emin olacaksınız. yoksa hedef kitlenin müziğini tespit edemez iseniz çoğu ziyaretçiden takdir göremezsiniz.

Vereceğim kodlar aslında HTML kodları değildir; Nedeni ise html kodları tüm tarayıcıları kapsamamaktadır; Bazı tarayıcılar eklenti ister yada sadece bir-iki tarayıcıyı destekler.

Vereceğim javascript kodları İE8 ve alt sürümler hariç, Tüm modern browserlarda çalışır.

JAVASCRİPT:


Sitenizde dinletmek istediğiniz mp3 formatlı müziğinizin adını audio.src = "müzik.mp3"; bölmünde "müzik.mp3" kısmına yazın. Müziğiniz mp3 klasörün altında veya başka bir klasördeyse önce klasör adını belirtin daha sonra mp3 müzik ismini yazın audio.src = "mp3/müzik.mp3";

Bu verdiğim kodları HTML sayfasında html ve body etiketleri arasında bir yere yerleştiriniz.

HTML:

<html>



<body>



</body>

</html>

audio.loop = true Özelliği Websitenizin arkaplanında çalan müziğin bittiğinde tekrar çalmasını sağlar. loop özelliğini false yaparsanız audio.loop = false müzik tekrar etmez.

MÜZİK PLAYER'E PLAY VE PAUSE BUTON EKLEME


Müzik player'e gerektiğinde kullanıcıların durdurması için bir play ve pause düğmesi ekleyelim.

HTML:

<html>



<body>



  

</body>

</html>


ARKAPLANDA ÇALAN MÜZİK DİĞER SAYFALARDA ÇALMASI İÇİN NE YAPILIR ?


Diğer sayfalarda müzik devamlı çalması için kod yoktur. Müzik, diğer sayfalarda çalması için sitemizi buna uygun duruma getirmemiz gerekir. Webcebir.com sayfasına dikkatli bakarsanız yukarıda header bölümü, altta footer bölümü ve sağ bölümde linklerin olduğu bölüm sabit diğer orta bölüm ise devamlı değişen bölümdür.

Bütün sitelerin sabit olan bölümle değişen bölümü vardır. Biz bu değişen bölüme verileri sayfa yenileme yapmadan getirmemiz gerekir. Sayfa yenileme yapılırsa müzik player baştan tekrar çalışmaya başlar, sayfa yenilemeden verileri ancak Jquery AJAX kullanarak yaparız. Websitelerde bunu beğen türü butonlar vardır ordaki sayıları veritabanından sayfa yenilemeden AJAX kullanarak veriler çekilir. Bizde bu sistemden faydalanacağız. Hemde websitemizde gözle görülür hızlanma olacaktır.

jQuery load() fonksiyonunu kullanacağız. jQuery load() yöntemi basit, ama güçlü AJAX yöntemidir. Bu yöntem, sunucudan veri almak için en basit yoldur. .php, .html, .text uzantılı sayfalardan veri çekip istediğimiz bir HTML etiket içine yerleştirebiliriz. Kullanımı basittir load( "deneme/test.html" ); şeklinde gösterilir. Bu fonksiyonu Sayfa url'den gelen veri ile dosyanın içeriğini çekeceğiz. Yanlız şunu söyleyim bilgisayarınızda çalışmaz; çalışması için server kurmalısınız (xampp,wamp...vb), yani localhosta çalışılır yada websitenin server'ında çalıştırmalısınız aksi takdirde çalışmaz.

HTML link yapımız şu şekilde olacak.

HTML:


Dikkat ederseniz link etiketi içerisinde data-url kısmı var bunu tarayıcımızın url kısmında gösterip burdaki veriyi alarak hangi sayfamızın yükleneceğini göstereceğiz.

jQuery kodlarının çalışması için, öncelikle jQuery kütüphanelerini sayfamızın <head> </head> tagları içine yerleştirmemiz gerekli. Bunun için jquery sitesinde jquery kütüphanesini indirin aşağıda ki şekilde websitenize ekleyin.

HTML:

<script type="text/javascript" 

src="jquery-1.3.2.min.js"> </script>

JavaScript dosyamız ise şöyle olacak.

JavaScript:

$("#menu li a").click(function(){

   var url=$(this).data('url');
   
   $("#container").load(url);
   
  });
  

Yukarıdaki javascript kodlarında link etiketi tıkladığımızda url'den veriyi alıyoruz ve load fonksiyonu ile o dosyayı yüklüyoruz.

Artık diğer sayfalarımızı oluşturalım. Yukarıda görüldüğü üzere id="container" olan div'in içerisine sayfalarımızı yüklüyoruz. websayfası çagrıldığında index sayfamız çalışır, diğer sayfaları çağırıp tekrar anasayfaya tıkladığımızda hata alırız bu hatanın önüne geçmek için index sayfamızın id="container" olan divin içeriğini alıp sayfa.html içeresine kaydedelim.

HTML:

ANA SAYFA BÖLÜMÜ

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

css.html dosya içeriğimizi şöyle yapalım.

HTML:


CSS SAYFASI

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

php.html dosya içeriğimizi şöyle yapalım.

HTML:

PHP SAYFASI

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

  • Ankara
  • Antalya
  • Manisa

iletişim.html dosya içeriğimizi şöyle yapalım.

HTML:


İLETİŞİM SAYFASI

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Sayfamızın enson içeriğini gösterelim. Konunun iyi anlaşılması için siteyi sade tuttum; Yoksa css kullanarak daha görsel bir site hazırlardım ama çok kod karmaşasından konu anlaşılamayabilirdi.

HTML:

<html>

<head>

<script type="text/javascript" 

src="jquery-1.3.2.min.js"> </script>

</head>

<style type="text/css">
   
#menu li{float:left;padding:5px;margin:5px;

         list-style-type:none;}
		 
#container{clear:both;}

</style>



<body>



ANA SAYFA BÖLÜMÜ

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.




</body> </html>
önizleme buton
Ali Diyor ki 23/03/2015

Hersey için teşekurler

Ozan Diyor ki 07/04/2015

çok güzel anlatmışınız.

halil ileri Diyor ki 17/05/2015

teşekkürler yaptım oldu

kadir Diyor ki 04/06/2015

müziği nerden ekliyoruz acaba ?

yönetici Diyor ki: 08/06/2015

Kadir bilgisayarına müzik diye bir klasör aç ve deneme.html adında boş bir html dosyası aç ve yukarıda ki kodları html dosyana kopyala. Ekleyeceğin mp3 müziğide müzik klasörüne ekle yukarıda belirtilen audio.src kısmına müzik dosyasının adını ekle .html dosyanı çalıştır.

Batuhan Alıcı Diyor ki 18/11/2015

Doğru bilgiler için teşekkür ederim. Ekledim çalışıyor. Çok sağol.

furkan Diyor ki 16/01/2016

Olmuyor

emin akburak Diyor ki 25/04/2016

merhaba kontrol ettiğim sistemde uyarı koduna ani #FFFF00 kırmızı uyarı olunca uyarı vermesini istiyorum dosyadan alarm çalsın istiyorum teşekkürler

yönetici Diyor ki: 02/05/2016

Emin, javascript programı butona tıklama veya mouse'la buton üzerine gelmeyi anlar diğer olayları algılamaz.

dogansk Diyor ki 22/07/2016

sesini kendim ayarlamak istiyorum nasıl yapabilirim

yönetici Diyor ki: 30/07/2016

Doğan, sesi kendin ayarlaman için aşağıda ki kodu audio.loop = true; satırın altına yaz.

audio.volume=0.5;

Müzik ses mevcut seviyesini belirler. 0.0 ile 1.0 arasında bir sayı olmalıdır.

0.5 değeri verirsek ses sevyesini %50 olsun demek.

BAHAR Diyor ki 08/08/2016

benim sesli sitem var girişte gelenlere nasıl dinletebilirim html nereye yapışacak detaylı anlatırsanız sevinirim

Muhammed Diyor ki 22/09/2016

eyw üstad nette farklı bilgiler geziyor tam bezdiğim anda bunu denedim oldu çok teşekkürler

nisan şan Diyor ki 31/10/2016

mobilde çalmıyor masa üstü tarayıcıda çalıyor neden acaba.

yönetici Diyor ki: 03/11/2016

Nisan, komutlar sadece bilgisayar donanımında etkilidir. cep telefonu gibi cihazları desteklememektedir. Sebebi belki cep telefonlarında kısa ömürlü olan pil teknolojisi gelişmediği için olabilir.


TulparHAN Diyor ki 04/11/2016

Müziği gerektiğinde kullanıcıların durdurması için bir player yada stop,start düğmesi ekleme ihtimali var mı ?

yönetici Diyor ki: 06/11/2016

TulparHAN, yukarıda ki konuya ekleme yaptım ordan bakabilirsiniz.

berkem mercan Diyor ki 07/11/2016

siteyi değiştirdiğimizde devam etmesini sağlayan bir kod mevcut değil mi ? mesela anasayfadan hakkımızdaya geçtiğimizde müziğin devam etmesini sağlamak


yönetici Diyor ki: 15/11/2016

Berkem mercan, yukarıda ki konuya ekleme yaptım ordan bakabilirsiniz.

mehmet Diyor ki 03/03/2017

teşekkürler kardeşim ALLah razı olsun

Adınız

Eposta

Mesaj

1565

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE