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.

Yaklaşık bir yıldan beri Chrome, Safari ve Firefox artık masaüstü, tabletler ve mobil cihazlarda otomatik oynatılan sesleri desteklemiyor.

Video veya müziği otomatik olarak oynatmak için site ziyaretçilerinizin kendi tarayıcılarındaki ayarları değiştirmesi gerekir.

Chrome'un otomatik oynatma politikaları aşağıdaki gibidir:

Kullanıcının bakış açısından, uyarı vermeden kendiliğinden ses çıkarmaya başlayan bir web sayfası veya uygulama sarsıcı, rahatsız edici veya rahatsız edici olabilir. Bu nedenle, tarayıcılar genellikle otomatik oynatmanın yalnızca belirli koşullar altında başarılı bir şekilde gerçekleşmesine izin verir.

Bunu neden yaptılar?


Daha katı otomatik oynatma politikaları temel olarak kullanıcı rahatsızlığını azaltmak ve web sitesi tasarımcılarına kullanıcının seçimine saygı duyan bir deneyim yaratmaları için rehberlik eder. Ayrıca bu daha katı politikalar, reklam engelleyicilerin yüklenmesini en aza indirir ve veri tüketimini azaltır.

Biz, bazı yöntemler kullanarak bu problemleri aşacağız.

HTML:


<iframe src="a.mp3" allow="autoplay" loop  style="display:none">
</iframe> 
<audio  loop autoplay>

  <source src="a.mp3"  type="audio/mpeg">

</audio>


Yukarıdaki kodları sitenizin </body> kapanış etiketini üstüne kopyalayın. src kısmına mp3 müzik dosyasının ismini yazın. Hem iframe hem de audio etiketine yazın. style="display:none" kodların sitede görünür özelliğini kaldırdık.

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:


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
</head>
<body>
<iframe src="a.mp3" loop id="x" allow="autoplay" style="display:none">
</iframe> 
<audio id="y">

  <source src="a.mp3"  type="audio/mpeg">

</audio>

<button onclick="play()">Play Müzik</button>

<button onclick="pause()">Pause Müzik</button>  
  
<script>
 function play() {
       y.play();
    }

    function pause() {

      x.setAttribute("src", "");
       y.pause();
    }  
</script>

</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:


<ul id="menu">
    <li><a data-url="sayfa.html" href="#">Anasayfa</a></li>
	
    <li><a data-url="css.html" href="#">Css</a></li>
	
    <li><a data-url="php.html" href="#">Php</a></li>
	
    <li><a data-url="iletisim.html" href="">iletişim</a></li>
</ul>

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:


<h1>ANA SAYFA BÖLÜMÜ</h1>

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

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

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

HTML:

  
<h1>CSS SAYFASI</h1>

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

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

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


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

HTML:


<h1>PHP SAYFASI</h1>

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

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

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

<ul>
<li>Ankara</li>

<li>Antalya</li>

<li>Manisa</li>
</ul>

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

HTML:


<h1>İLETİŞİM SAYFASI</h1>

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

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

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

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>

<script type="text/javascript">
    audio = new Audio();
    audio.src = "ney.mp3";
    audio.loop = false;
    audio.play();
 

$(document).ready(function(){

$("#menu li a").click(function(){
   var url=$(this).data('url');
   
   $("#container").load(url);
   
  });
  
});
	
    
</script>

<body>

<ul id="menu">
    <li><a data-url="anasayfa.html"href="#">Anasayfa</a></li>
    <li><a data-url="css.html" href="#">Css</a></li>
    <li><a data-url="php.html" href="#">Php</a></li>
    <li><a data-url="iletisim.html" href="#">iletişim</a></li>
</ul>

<div id="container">

<h1>ANA SAYFA BÖLÜMÜ</h1>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p>

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

</div> 

<br/>
<br/>
<br/>
<div id="footer"style="background-color:skyblue;">FOOTER BÖLÜMÜ</div>

</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

halime 23/01/2019

Kod masaüstünde çalışıyor. Faka mobilde mp3 çalmıyor. Onun icin ekstra bir kod var mi?

yönetici 23/01/2019

Halime, Tarayıcılar devamlı güncellenmekte neden derseniz webmasterlar yeni çıkan kodları kullandığında tarayıcıları bu yeni kodları görmüyecek ve itibar kaybadeceklerdir. Onun için sürekli güncellenmekteler bu husustada chrome yeni teknolojileri güncellemekte baya hızlıdır yeni android chorome sürümü yükle sorun düzelecektir.

Seyyid 06/02/2019

Çok Güzel Anlatılmış Fakat benimde bir sorum olacak : Website açılırsa bu müzik direk çalmaya başlaması için ne yapmak lazım . Site açıldığında direk başlasın pause'dan kapatılabilsin.

Yönetici 06/02/2019

Seyyid, yukarıda MÜZİK PLAYER'E PLAY VE PAUSE BUTON EKLEME bölümünde anlatıldı. Website açıldığında müzik çalar pause butonla durdurursun, play butonla devam eder.

Ercan 25/04/2020

Merhaba google classroomda müzik dersi için testler hazırlıyorum test içerisine ses dosyaları eklemem gerekiyor. Örneğin dinlediğiniz ezginin notası veya ritmi hangisi gibi. (Görselini bakarak cevaplayacak) Ancak dinleyeceği ezgiyi bir buton ile çalıştırması istiyorum. (Ses dosyalarını kendim hazırlıyorum) Script dili ile istediğim sorunun içine nasıl eklerim. Teşekkürler

yönetici 26/04/2020

Ercan, Butona tıklama konusu için bakın

Furkan 11/08/2020

Bunu kendi siteme yerleştirmede yardımcı olurmusunuz?

yönetici 12/08/2020

Furkan, üzgünüm yardımcı olamıyorum. Yukarıda baştaki kodu body kapanış etiketinin üstüne kopyala, müzik dosyasını ekle, dosya adınıda a.mp3 olarak yeniden adlandır.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

8849

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