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:

Sessiz bir otomatik oynatmanın oynatılmasına izin verilir.
Sesli otomatik oynatmaya yalnızca kullanıcı tıklama, dokunma vb. Öncesinde web sitesi ile bir tür hareket yaptığında izin verilir.
Masaüstünde, kullanıcının web sitesi etki alanı için MEI'sinin (Medya Katılım Dizini) belirli bir sınırı aşması durumunda sesli otomatik oynatmaya da izin verilir. MEI, kullanıcının daha önce web sitesinde sesli bir medya oynattığının bir göstergesidir, bu nedenle mevcut durumda medyayı otomatik olarak oynatmak uygundur.

Chrome'un MEI'yi hesaplamak için bazı kuralları vardır, örneğin önceden medya kullanımı 7 saniyeden büyük, önceden oynatılan videonun boyutu 200x140 pikselden büyük olmalıdır.
Cep telefonlarında, kullanıcı web sitesini ana ekranına yerleştirmişse sesli otomatik oynatmaya her zaman izin verilir.
Chrome'un gezinme çubuğuna chrome://media-engagement/ adresini girerek ziyaret ettiğiniz web siteleri için MEI'yi kontrol edebilirsiniz .

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>

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.

Melih 07/09/2020

Selam, Verdiğiniz kodu denedim oldu teşekkürler; Fakat ben siteye girildiğinde otomatik olarak çalmasını istiyorum. sonradan isteyen kapatsın butonla bunu nasıl yapabilirim yardımcı olursanız sevinirim.

yönetici 09/09/2020

Melih, MÜZİK PLAYER'E PLAY VE PAUSE BUTON EKLEME başlığında anlatılmıştı.

yusuf karnıkara 11/09/2020

merhaba ben html dosyamın arka planına müzik ekledim ama googleden actığım zaman çalmıyor normal idede canlı bolümünü açtığım zaman çalıyor yardımcı olabilirmisiniz.

yönetici 13/09/2020

Yusuf, filezalla ftp proğramıyla değişiklik yaptığın html dosyanı ve müzik dosyasını servere yüklemen gerekir.

Turan 02/01/2021

Merhaba benim bir sorum olacaktı play ve pause tuşlarının yanına birde stop tuşu eklemek için hangi değişiklikleri yapmalıyım kod gayet iyi çalışıyor ama müzik dinlerken pause'ye basıp sonra play'e basınca kaldığı yerden devam ediyor durdurma tuşuna basıp play tuşuna basıldığında baştan başlamasını istiyorum bir türlü yapamadım.

yönetici 04/01/2021

HTML kısmına şu kodları ekle:


<button onclick="load()">stop Müzik</button>

javascript kısmına şu kodları ekle:


 function load(){
    x.setAttribute("src", "");
    y.load();	
    }

Nevdar Akkurt 11/01/2021

Merhaba. Ben sizin kodlarınızı kullanarak mini bir player yaptım sitem için, oldu da. Ancak sıkıntım şu: Oto oynatma özelliğini ekledim ve pc tarayıcılarında bu özellik çalışıyor. Ama iPhone’ dan siteme girince; bırakın otomatik oynatma özelliğini, eklediğim controls butonlarını bile göremiyorum sitede. Sanki hiç eklenmemiş gibi. Sizce sebebi ne olabilir?

yönetici 12/01/2021

Auto oynatma özelliği mobil telefonlarda iptal edilmiştir. Çok kaynak tükettiği için kodlardan kaldır bir dene yoksa tarayıcıyı güncelleyin öyle deneyin.

Esma 21/01/2021

Iyi gunler ben 20 tane müzik eklicem ama 1 tane tek caliyo nasil yapabilirim.

yönetici 25/01/2021

Esma, bir tane yeterli websitede kaynak tüketimi fazla olacak sınırsız hosting alman gerekecek fatura kabaracaktır. Burda konuda yorumlarda bir örnek var

sercan 07/03/2021

Herşey doğru çalmıyor ekleyemiyorum

yönetici 09/03/2021

Sercan, Tarayıcılar kaynak tüketimi olmasın diye genelde otomatik oynatma özelliğini kapatıyorlar. Tarayıcıdan açman gerekir. ikinci kodlar çalışıyor.

HACKTHOR 10/03/2021

Merhabalar Bende Ne Opera Web Tarayicisinda Nedeki Google Tarayicisinda Caliyor Hic Birinde Girince Calmiyor Bu Arada Site Hala Yapim Asamasinda Yani Siteyi Sunmadim

yönetici 12/03/2021

Bir üst mesaj geçerlidir. Müzik çalmasını ziyaretciye bırakırsanız:


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

Ziyaretci bir butona tıklarsa müzik çalmasını Tarayıcılar izin vermekte. Oyun sitelerinde müzik olması gerekir. Bir oyun oluşturuyorsanız, kullanıcıların oynamaya başlamak için bir düğmeyi tıklaması gerektiğinde bir başlangıç ekranı eklemeye ne dersiniz? O zaman, sayfanızda ister müzik ister ses efektleri olsun, bir çeşit sese sahip olabileceği açıktır.

Necati Aksu 30/07/2023

Sevgili Webcebir, oynatma hızı için nasıl bir kod eklemeliyiz?

yönetici 02/08/2023

javascript ile yaparsın google'dan "html5 video speed controller" diye aratma yap.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET