HTML

HTML Arkaplana Müzik Ekleme

Ocak 27, 2020
3 Okuma Süresi

Web sitenize gelen ziyaretçilere arkaplanda ses dinletmek isteyebilirsiniz. Bu yazıda arka plana ses ekleme, eklenen sesin diğer sayfalarda da çalmasını sağlama bir çok soruya cevap bulacaksınız.

 

Yazının devamında HTML belgesine adım adım ses eklemeyi öğrenip ardından diğer sayfalarda nasıl çalmaya devam edeceğimizi öğreneceğiz. Ses belgesini ekleme ve çalışma için gerekli tüm işlemler HTML ile yapılacak, diğer sayfalarda da kaldığı yerden devam etme için de JavaScript kullanacağız.

HTML Belgesine Ses Ekleme

HTML belgesine ses eklemek için audio etiketi kullanılır. <audio> etiketinin src niteliğine çalışacak ses dosyasının URL adresini alır. Aşağıdaki basit örnekte ses1.mp3 isimli dosya eklenecek ve otomatik olarak çalışacaktır. Otomatik çalması için autoplay niteliğini kullandık.

1
2
3
 
<audio src="ses1.mp3" autoplay></audio>
 

Etiket eklendiğinde ekranda hiç bir değişiklik olmayacaktır. Eğer player kontrolünü ekranda görmek isterseniz. controls niteliğini ekleyerek sayfayı yenileyin. Ekranda Audio nesnesinin kontrolü belirecektir.

1
2
3
 
<audio src="ses1.mp3" controls autoplay></audio>
 

Çıktı:

arkaplana ses ekleme
arkaplana ses ekleme

 

ARKAPLANDA ÇALAN MÜZİK EKLEME

Farklı bir sitede arkaplandaki sesin çalışması için Jquery ile sayfayı asenkron yüklemeyi tercih etmişler. Doğrusunu söylemek gerekirse yöntemi beğendim fakat ajax kullanmayan sitelerde bu yöntem çalışmayacağı için başka bir yöntem düşünmek gerektiğinin farkında olarak kodları yazmaya başladım.

Öncelikle audio nesnesini javascript tarafından nasıl müdahale edeceğimizi bakalım. Adımların sonunda diğer sayfada kaldığı yerden nasıl çalıştırdığımızı öğrenmiş olacağız.

Sayfa Yüklemesi ve Sayfa Kapanması

Sayfa kapatılırken playerın bulunduğu süre kaydedilecek ve sayfa yüklenirken kayıtlı olan süreden tekrar başlatılacak. Bunun için window nesnesinin onload ve onbeforeunload olayları kullanılır. Aşağıdaki iskelet yapı üzerinden konuyu anlatmaya devam edelim.

1
2
3
4
5
6
7
8
9
10
11
 
    <script>
        window.onload=function(){
            //sayfa açıldığında çalışır.
        }
        window.onbeforeunload =function(){
            //sayfa kapatılmadan hemen önce çalışır.
        }
    </script>
 

Sayfa yüklendiğinde audio nesnesini seçip çalıştıralım.

1
2
3
4
5
6
7
8
9
 
    <audio id="oynatici1" src="ses1.mp3"></audio>
    <script>
        const player=document.querySelector("#oynatici1");
        window.onload=function(){
            player.play();
        }
    </script>
 

Şimdi audio nesnesinin bazı özelliklerinden bahsetmek gerekiyor. .play() metodu oynacıyı otomatik çalıştırmak için kullanılıyor. .currentTime özelliği ise oynatıcının oynatmakta olduğu süreyi verir.  Aşağıdaki oynatıcı 40. saniyeden çalışmaya başlayacaktır.

1
2
3
4
5
6
7
8
9
10
11
 
    <audio id="oynatici1" src="ses1.mp3"></audio>
    <script>
        const player=document.querySelector("#oynatici1");
 
        window.onload=function(){
            player.play();
            player.currentTime=40;
        }
    </script>
 

Şimdi oynatıcıyı kayıtlı(sayfa kapatırken kaydedilecek olan) süreden başlatalım. Kayıtlı olan süreyi almak için localStorage kullanacağım. Localstorage ile ilgili daha fazla bilgi almak için buradaki yazıya bakabilirsiniz.

Sayfa Yüklendiğinde Kayıtlı Süreyi Okuma

Kayıtlı süre varsa olan süreden başlatma yoksa da 0. saniyeden başlatmak için onload içine aşağıdaki kodları ekleyerek devam ediyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
    <audio id="oynatici1" src="ses1.mp3"></audio>
    <script>
        const player=document.querySelector("#oynatici1");
        window.onload=function(){
 
            //sure değişkeni yoksa 0 varsa olan süreden başlayacak
            let sure=0;
            if(localStorage.getItem('sure'))
            {
                sure=localStorage.getItem('sure');
            }
 
            player.play();
            player.currentTime=sure;
        }
    </script>
 

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

Sayfa Kapatılırken Mevcut Süreyi Kaydetme

Yukarıdaki kodda kayıtlı süreyi okumayı yaptık. Sayfa kapatılırken (beforeunload) süreyi kaydedeceğiz.

1
2
3
4
5
6
7
 
        window.onbeforeunload =function(){
            
            sure=player.currentTime;
            localStorage.setItem('sure',sure);
        }
 

Kodları tekrardan yazacak olursak tüm kodlar bu şekilde olacaktır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
    <audio id="oynatici1" src="ses1.mp3"></audio>
    <script>
        const player=document.querySelector("#oynatici1");
        window.onload=function(){
 
            //sure değişkeni yoksa 0 varsa olan süreden başlayacak
            let sure=0;
            if(localStorage.getItem('sure'))
            {
                sure=localStorage.getItem('sure');
            }
 
            player.play();
            player.currentTime=sure;
        }
 
        window.onbeforeunload =function(){
            
            sure=player.currentTime;
            localStorage.setItem('sure',sure);
        }
    </script>
 

Örnek sayfa 1 ve kodları şu şekilde oluşacaktır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Tasarım Kodlama</title>
</head>
<body>
    
    <h1>Sayfa 1</h1>
    <p><a href="sayfa1.html">Sayfa 1 </a><a href="sayfa2.html">Sayfa 2 </a></p>
    <audio id="oynatici1" src="ses1.mp3"></audio>
    <script>
        const player=document.querySelector("#oynatici1");
        window.onload=function(){
 
            //sure değişkeni yoksa 0 varsa olan süreden başlayacak
            let sure=0;
            if(localStorage.getItem('sure'))
            {
                sure=localStorage.getItem('sure');
            }
 
            player.play();
            player.currentTime=sure;
        }
 
        window.onbeforeunload =function(){
            
            sure=player.currentTime;
            localStorage.setItem('sure',sure);
        }
    </script>
</body>
</html>
 

Bütün sayfalarda mevcut audio etiketini ve javascript kodlarını yazarak ugulamayı genişletebilirsiniz.

 

Etiketler

3 Yorum

Yorum yapmak için tıklayın