HTML5 ve CSS3 ile Ses Oynatıcı Oluşturma

HTML5 ve CSS3 ile Ses Oynatıcı Oluşturma


 

İzlenim Aracın UI'sından bir Audio Player'ı kodlayacağız. Stil için CSS3 ve işlevsellik için " MediaElement.js " ile kodlayacağız. MediaElement.js, HTML5 ses ve video oynatıcı olup, HTML5 MediaElement API'sını taklit etmek için Flash ve Silverlight kullanan daha eski tarayıcılarda da çalışır.

 

1. Adım - MediaElement.js'yi İndirme
 
 
Öncelikle "MediaElement.js" komut dosyasını indirip çıkarmamız gerekir. Sonra "yapı" klasöründen üç dosyaya ihtiyacımız var.
  • flashmediaelement.sf
  • MediaElement-ve-player.min.js
  • silverlightmediaelement.xap
 
Sonra tüm bu üç dosyayı aynı dizine kopyalayın, "js" klasörü için kopyalayacağız.
 
Adım 2 - HTML İşaretleme
 
 
Şimdi jQuery Kütüphanesine bağlanmamız gerekiyor, yerel olarak barındırabilir veya Google tarafından barındırılan kütüphaneyi kullanabiliriz. Sonra "mediaelement-and-player.min.js" komut dosyasına ve CSS dosyasına bağlanmamız gerekir. Bu üç dosya da <head> etiketin içinde olmalıdır.
 
Kodlar:
 
 
 
Oynatıcıyı oluşturmak için "ses çalar" <div> sınıfına bir genişlik katacağız. Bu div, oyuncu elemanlarımız için konteyner olacaktır. Şarkı adı ve kapak için bir etiket ekleyin. Ardından, şarkımızla bağlantı oluşturacak etiketi ekleyeceğiz ve ayrıca kimliği "ses çalar" olarak ayarlayacağız . <h1><img><audio>
 
Kodlar:
 
 
 
 
Bitirmek için, </body> etiketi bitmeden önce bu kodu eklemeliyiz. Ayrıca <audio>, oynatıcıyı yüklemek için etikette kullandığımızla aynı kimliğe eklememiz gerekiyor. Bazı ayarları da yapabilirsiniz, daha fazla bilgi için "MediaElement.js" belgelerini okuyun.
 
Kodlar:
 
 
 
 
 
3. Adım - Container Stilleri
 
Önce kapta kullanacağımız tüm öğeler için bazı sıfırlama stilleri ekleyelim.
 
 
 
 
Şimdi oynatıcı kutusunu stillendirelim, genişliği 400 piksele, yüksekliği de 120 piksele ayarlayalım. Ayrıca bir CSS3 arka plan degradesi ve yuvarlatılmış köşeler ekleyeceğiz.
 
 
 
 
 
 
Adım 4 - Başlık ve Kapak
 
Oyunatıcının container başlığı ve kapağı konumlandırıp başlık için bazı tipografi stilleri ekleyelim.
 
Kodlar:
 
 
 
 
 
 
Adım 5 - Düğmeleri Denetleme
 
 
Şimdi oyuncu kontrollerini stil edeceğiz (oynat / duraklat, sustur / sesi aç) . Bunu yapmak için düğmelere bazı genel stiller vererek başlayacağız ve daha sonra sabit bir genişlik ve yükseklik ayarlayacağız. Bunları konumlandırmak olacaktır “pause / play” düğmeleri ve “/ dilsiz unmute” aynı pozisyonda düğme ve tıklama etkinliğini geçiş yapılır.
 
 
 
 
 
6. Adım - Ses Kaydırıcısı
 
 
Ses kaydırıcısını stil yapmak için konumlandırırız, o zaman 200 piksel genişlik ve 8 piksel yükseklik veririz. Ayrıca bir arka plan rengi, bazı gölgeler ve yuvarlatılmış köşeler ayarlamamız gerekir.
 
 
Kodlar:
 
 
 
Sonra "geçerli hacmi" stil gerekir, bunu yapmak için özel bir resim arka plan, yuvarlak köşeler vb. ekleyeceğiz.
 
 
Kodlar:
 
 
 
 
 
7. Adım - İlerleme Çubuğu
 
 
İlerleme çubuğu stilleri neredeyse temel özelliklerdendir. Oyuncu konteyneri (400px) ile aynı genişliği vereceğiz ve alt kısmına yerleştireceğiz. Sol ve sağ köşeleri de yuvarlak yapacağız. Ardından her durum için bazı arka plan renkleri belirleyeceğiz (toplam, yüklenen ve mevcut ). Fark edebileceğiniz gibi, yüklü ve mevcut saat için genişliği 0 olarak ayarlamamız ve şarkı çalarken veya yüklendiğinde genişlik artacaktır.
 
Kodlar:
 
 
 
 
Adım 8 - Progres & Ses Tutamağı
 
 
Şimdi ilerleme çubuğuna ve ses seviyesi kaydırıcısına bir tutamaç ekleyeceğiz. Temelde sadece arka plan resmi ekleyeceğiz, genişliği,yüksekliği ayarlayacağız ve yerleştireceğiz.
 
 
Kodlar:
 
 
 
 
 
 
Adım 9 - Zaman Aleti İpucu
 
 
Ses çaları bitirmek için ilerleme çubuğunun üzerine geldiğimizde görünecek bir araç ipucunu ekleyeceğiz. Stiller diğer adımlardaki ile hemen hemen aynıdır. Konumlandırırız, sabit bir genişlik, yükseklik değerleri ve arka plan resmi ekleriz. Ayrıca bazı tipografi stilleri ekleyeceğiz.
 
Kodlar:
 
 
 
 
 
 
 
 YUKARI