|
Bir internet sitesi yaptıysanız ve sitenizde
ziyaretçilere müzik (veya herhangi bir ses dosyası)
dinletmek istiyorsanız,
sitenize (ya da sitenizin istediğiniz bir sayfasına)
ses dosyası eklemek için yapacağınız işlemler ve size gerekli
olan kodlara aşağıda özetle ve kısa örneklerle yer
verdim. Umarım işinize yarar.
Bu konuyu anlatırken örnek olarak "Günün Birinde" adlı
şarkının 22 saniyelik kısa bir bölümünü kullandım. Bu
ses dosyasını seçmemdeki amaç bütün tarayıcılar tarafından
kolaylıkla tanınan "mp3" uzantılı bir ses
dosyası
olması, süresi kısa olduğu için boyutunun da kısa olması
ve bu sebeple ses dosyamızı test ederken kolaylıkla
yüklenebilmesi. Yani uzun lafın kısası "gununbirinde"
adını verdiğim ve "gununbirinde.mp3" şeklinde
"mp3" uzantılı olarak kullandığım bir ses
dosyası seçtim ve aşağıda adım adım bu ses dosyasını "sesdosyasi.htm"
şeklinde oluşturduğum html belgemin içine
yerleştireceğim.
(Sizin de deneyerek uygulamanız açısından örnek olarak
kullandığım bu ses dosyasını indirip kullanmanız için
"gununbirinde.mp3" adlı dosyayı hemen aşağıya
"WinRar"la sıkıştırılmış olarak ekliyorum.)
Öncelikle sitenize ses dosyası eklemek için gerekli olan basit
kod yapısının "<audio> </audio>"
etiketleri arasında yer alacağını söyleyelim. (Tabii bu
etiketleri ve bu etiketler arasında yer alan audio
kodlarını "html" belgemizde "<body> </body>" etiketleri
arasında ve sayfamızda ses dosyasının görünmesini istediğimiz
bir yere koyacağımızı söylememe gerek yok sanırım.) Bu
etiketlerin arasına sitemizde göstermek istediğimiz ses
dosyasını (bizim örneğimizde "gununbirinde.mp3")
yerleştireceğiz. Ancak;
|
HTML Kodu |
<audio>
gununbirinde.mp3
</audio> |
şeklinde bir kod yazdığımız zaman ses dosyamız
çalmayacak ve ses paneli de sitemizde
gözükmeyecektir. Bunun sebebi; kod yapısına (ve
tarayıcıya) ses dosyasının yolunu, dosya kaynağını, yani
ses dosyasını nerede arayacağını göstermemiş olmamızdır. Bunun
için kodu;
|
HTML Kodu |
<audio>
<source src="gununbirinde.mp3"
/>
</audio> |
şeklinde düzelttiğimiz zaman da sitemizde / sayfamızda
ses dosyası açılmıyor ve ses paneli de sitemizde
görünmüyor.
Bu durumda hemen şu aklımıza geliyor: "HTML"
belgesinde "<body> </body>" etiketleri (tagleri)
arasına yerleştirdiğimiz ses dosyaları, bazı tarayıcılar
tarafından tanınmayıp açılmayabileceği için dosya türüne
dikkat etmemiz ve tarayıcıda açılması için dosya türünü
de tarayıcıya tanıtmamız gerekebilir. O hâlde bu ses
dosyasının dosya uzantısı "mp3" olduğundan,
dosyanın türünü tarayıcılara tanıtacak kodu da
kodlarımız arasına eklememiz acaba sorunu çözebilir mi?
Bu sebeple kodumuzun son hâlini;
|
HTML Kodu |
|
<audio>
<source src="gununbirinde.mp3"
type="audio/mp3"
/>
</audio> |
olacak şekilde düzeltiyoruz. Ancak yine hiçbir
değişiklik olmuyor ve ses dosyamız açılmıyor.
İşte bunun sebebi, sitemizde çalmak
istediğimiz ses dosyasının kontrol özelliğinin
atanmamış ve tarayıcıya tanıtılmamış olmasıdır.
Öyleyse ses dosyasının kontrol özelliğini de
"controls" olacak şekilde kodlarımız
arasına (<audio> etiketinden hemen sonra gelecek
şekilde) yerleştireceğiz. <Audio> etiketideki
"audio" yazısının arkasına "controls" ifadesini
eklememizin nedeni, dediğim gibi hem ses
dosyasının
kontrol özelliğinin tarayıcıya tanıtılması hem
de ses dosyasının (oynatma, durdurma, ses gibi)
kontrollerinin kullanılabilmesinin
sağlanmasıdır. Öyleyse şimdi "controls"
özelliğini de kodlarımıza eklediğimiz zaman kod
yapımız şu şekilde olacaktır:
|
HTML Kodu |
|
<audio
controls>
<source src="gununbirinde.mp3"
type="audio/mp3"
/>
</audio> |
Aşağıdaki resimde de gördüğünüz gibi ses
dosyamız
kontrol özellikleriyle birlikte açıldı ve ses
dosyasını / müziği açıp oynatabiliyoruz:
Burada hemen şunu söylemekte yarar görüyorum:
Belki bazı yerlerde veya sitelerde bu kodların
"<audio
controls = "controls">" ya da
"<audio controls = "autoplay">" şeklinde
yazıldığını görmüş olabilirsiniz. Burada ilk
"controls" ifadesi bir kategoriyi,
atanmış bir özelliği belirttiği için daha sonra
("=" işaretinden sonra) gelen
"controls" yazısı ses
dosyamızda (durdurma,
oynatma, ses gibi) özelliklerin olmasını
istediğimizi belirtirken; "autoplay"
ifadesi de (oynatma, durdurma, ses gibi)
kontroller olmadan ses dosyasının otomatik olarak
açılmasını istediğimizi belirtmektedir. Ancak
(özellikle Google Chrome gibi birçok tarayıcı
ve özellikle mobil cihazlar-insanların sayfayı açar açmaz yüksek sesle
karşılaşmaması, istenmeyen durumların önüne
geçilmesi gibi bazı sebeplerle- otomatik oynatma
özelliğini görmezden geldiği için) biz bu
kodları "<audio controls = "controls">"
ya da "<audio controls = "autoplay">"
şeklinde yazsak da ses dosyamız otomatik olarak
açılmayacak, kontrolleriyle birlikte
görünecektir. Bu yüzden de sadece "<audio
controls = "controls">" ya da
"<audio controls>" yazmamız yeterli
olacaktır.
Yine yukarıdaki örnekte gördüğümüz gibi; biz
sayfamızda ses dosyası panelimiz için herhangi bir boyut ya
da yer belirtmediğimiz için ses dosyamız
(kontrollü ses
dosyası paneli) tarayıcımızın varsayılan olarak belirlediği
boyutlarda ve yerde göründü. Bu ses dosyasının
yerini sitemizde (ya da sayfamızda)
değiştirebilir; ortaya, sağa, sola veya aşağıya
yukarıya alabilir ya da bir tablonun içine
koyabiliriz. Ancak ses dosyamızı çalmaya
yarayacak olan (üzerinde çalma, oynatma,
durdurma, ses gibi kontrollerin bulunduğu)
panelin boyutlarını html kodlarıyla
değiştiremeyiz. Bunu ancak "CSS" bilgisi ve
kodlarıyla yapabiliriz. Bu ise başka bir konu
olduğu için burada buna hiç değinmeyeceğim.
Şunu da söylemek gerekiyor ki; kodlarınızda yer
verdiğiniz ve tarayıcının arama yapacağı dosya
yolu da önem arz ediyor. Örneğin oluşturduğunuz
"html" belgesiyle ses dosyamız (bizim örneğimizde
"gununbirinde.mp3" dosyası) aynı klasörde olduğunda
yukarıda söylediklerimizin hepsi geçerli. Ancak
diyelim ki; "gununbirinde.mp3"
ses
dosyamız, oluşturduğumuz site sayfasının kaynağı
olan "html" belgesiyle aynı klasörde yer
almıyorsa, mesela "gununbirinde.mp3"
dosyamız "muzikler" adlı başka bir
klasörün içindeyse ne yapmamız gerek? Bu durumda
da tarayıcıya "gununbirinde.mp3" adlı
ses dosyasının "muzikler" klasörü içinde
olduğunu bildirecek ve tarayıcının ses
dosyasını bulması için yolu göstereceğiz.
Öyleyse son hâliyle kodumuz şu şekilde olacak:
|
HTML Kodu |
|
<audio controls>
<source src="muzikler/gununbirinde.mp3"
type="audio/mp3" />
</audio> |
Başka bir örnek olarak da; eğer ses dosyamız
kodları yerleştirdiğimiz "html" belgesinin
bulunduğu dizinden daha üst bir dizindeyse, o
zaman da tarayıcının html belgemizin bulunduğu
dizinden / klasörden çıkıp bir üst dizinde ses
dosyasını bulması için "../"
ifadesini kullanacağız. Bunu yapınca kodlarımız
şu şekilde olacak:
|
HTML Kodu |
|
<audio controls>
<source src="../gununbirinde.mp3"
type="audio/mp3" />
</audio> |
Yine diyelim ki; ses dosyamız html belgemizin
bulunduğu klasörün bir üst dizininde
"muzikler" klasörünün içinde tutuluyor. O
hâlde de kodlarımız şöyle olacak:
|
HTML Kodu |
|
<audio controls>
<source src="../muzikler/gununbirinde.mp3"
type="audio/mp3" />
</audio> |
Son olarak bu örneği size göstermek için
oluşturduğum "sesdosyasi.htm" sayfasının html
kodlarını da bir fikir vermesi açısından aşağıya
alıyorum:
|
HTML Kodu |
|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=windows-1254">
<title>gununbirinde</title>
</head>
<body>
<audio
controls>
<source src="gununbirinde.mp3"
type="audio/mp3" />
</audio>
</body>
</html> |
Şimdilik benim bu konuda söyleyeceklerim özetle
bunlar. Siz deneme yanılma yöntemiyle ve sürekli
test ederek bu konudaki başka püf noktalarını
keşfedip daha da geliştirebilirsiniz. Umarım
buraya kadar özet olarak verdiğim bilgiler
işinize yarar.
|
