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

Batuhan Alıcı 26/03/2018

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

Muhammed 26/03/2018

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

dogansk 26/03/2018

sesini kendim ayarlamak istiyorum nasıl yapabilirim

yönetici 26/03/2018

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 volume 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.

bilal polat 25/06/2018

Faydalı bilgiler için teşekkür ederim.

kemal ayyıldız 06/12/2018

harika
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

9157

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.