Sitede neden müziğe ihtiyacınız var?

Oldukça ilginç bir soru, sitedeki müzik veya ses dosyalarını oynatma veya yerleşik oyuncu site ziyaretçilerinin rahatlamalarını sağlar, olumlu duygulara neden olur, bu nedenle siteyle etkileşimi kolaylaştırır. Ancak bu etkiler, yalnızca sitedeki müzik doğru şekilde seçildiğinde çalışır ve ses hacmi izin verilen sınırları aşmaz, aksi takdirde tüm çabalarınız boşuna olacak ve saha ziyaretçilerinden olumsuz duygulara neden olacaktır.

HTML'deki siteye ses (müzik) nasıl yerleştirilir?

Sık sık böyle bir soruyu soruyoruz, sitedeki müzik alakalı ve yaratıcı bir unsurdur ve çoğaltmanın birçok yolu vardır ve bunlar uygulanması çok zor değillerdir. Küresel ağın her kullanıcısının internete erişmek için herhangi bir tarayıcı kullanması ve ses ve müzik dosyalarını oynatmak için genel ve evrensel bir teknoloji yoktur, her tarayıcı kendi algoritmalarında çalışır ve birbirlerinden biraz farklıdırlar. , bu nedenle, HTML sayfasındaki giriş yardımından müzik çalarken ortaya çıkabilir. Ama bildiğin gibi, tüm sorunlar çözüldü!

HTML, JavaScript, JQuery, AJAX yöntemlerine müzik ekleyin:

1 yol.

Web sitesinde veya oyuncu üzerinde müzik çalar sesi oluşturma

Teknoloji basittir, oyuncu dosyası oluşturulur, böylece siteyi veya sunucuyu kullanmamız gereken teknolojiyi seçin: Javascript, JQuery, Ajax. Seçilen teknolojiye dayanarak, sitemiz için bir komut dosyası geliştirir ve siteye ekleriz. Komut dosyası ihtiyacınız olana bağlı olarak oluşturulur: Sitede veya kullanıcı odaklı oyuncu üzerindeki arka plan müziğinin otomatik çoğaltılması. Sonra, müzik için sitenin kökünden bir klasör oluşturun ve içine ses dosyalarını yükleyin.

Ya da alternatif bir uyumsuzluk olarak, flash teknolojisi (flaş) üzerinde bir oyuncu oluşturabilirsiniz, böyle bir oyuncu daha etkili bir şekilde görünecektir. Gerçek şu ki, site için daha pahalı ve daha zor olacaktır (sitenin sayfalarını indirmek için zaman artıracak).

2 yol.

HTML kullanarak siteye müzik takma

HTML ve tarayıcı yeteneklerini kullanarak Site oynatıcısına veya arka plan müziğine eklenebilir. Teknoloji basittir: HTML5 kodu "Ses" etiketi ile oluşturulur ve bu kod siteye yazılır ve kullanıcı siteye girdiğinde, en aza indirilmiş bir oyuncuyu görür, ziyaretçi oyun düğmesini tıklar veya otomatik olarak oynamaya başlar. arka plan müziği. Müzikçaların görünümü, ziyaretçinin geldiği tarayıcıya bağlı olacaktır, ancak işlevsellik standart kalacaktır: oyun, durdurma, sonraki, önceki, birim düğmeleri. Şöyle html kodlu bir oyuncuya benziyor:

Eklemek için CAM Kodu böyle görünüyor:

"Kontroller AutoPlay" komutunu fark edebileceğiniz gibi, ziyaretçi siteye gelmez müzik çalmayı içerir.

HTML kodunun alternatif bir sürümü "BGSOUND" etiketidir, sitesi ziyaret ederken, sitede müzik çalmaya başlarken, ancak ses seviyesini ayarlamaya, vb. Ayrılarak görsel bir oyuncu kullanmaz. Kullanıcı mümkün olmayacak. Ses dosyasını ayarlama Oynatma, kodun kendisinde yapılandırılmıştır.

Sitede müzik çalmak için ses dosyalarının formatları olabilir: WAV, AU, MIDI, MP3, OGG (uzantılar). Müzik dosyaları siteye yüklenir veya ses dosyasının bulunduğu sitelere bağlantılar, ana şey açık erişimde olmasıdır.

Online istediğiniz müziği aramak zorunda kaldınız mı? En sevdiğiniz sitenizde duyduğunuz kişidir (sosyal ağlar, müzik portalları). Sıklıkla sadece başka olmadığı olur.
"Arayanlar", bunun olmadığını söyleyecektir. Ancak, teknolojilerin bilgisi olan ortalama kullanıcıyı, sayfanın kaynak kodunda veya önbelleğe "kazma" yapmasına izin vermiyor.

Bu yüzden arkadaşlarımın çoğunun bu kadar kullanıcılar olduğu oldu. Burada onlar için ve krom (ve benzerlerini) bu genişlemeyi yazmaya karar verildi.

Ne olabilir

• İndirmek herhangi bir sitedeki herhangi bir ses dosyası (MP3, WAV)
• Orijinal ismi doğru şekilde belirler
• Süre, boyut ve bit hızı gösterir
• Bir parça olarak aynı sayfada indirin (yönlendirmeden)
• Önizleme Dosyası

Krom Mağazasından Uzantıyı Deneyin

Bazı resimler ve video:

Sağlıklı bir eleştiriden memnun olacağım. Umarım birileri bu genişleme için yararlı olacaktır.
Eğer ilgileniyorsanız, yakın gelecekte, başka bir merkezde kaynağa genel bir bakış yayınlayacağım ve GitHub'a koyacağım.
Ayrıca Firefox ve yani liman için planlarda.

P.S\u003e Video indirme olasılığı da orada, ancak şu anda kapatıldı (video akışı ile ilgili küçük sorunlar var).

HTML Dili
Ses ve video ekleme

Ses eki. Etiket
Web sayfasındaki ses kayıtlarını ekler, çoğaltır ve kontrol eder. Dosyanın yolu özelliğe göre ayarlandı src veya iç içe geçmiş etiket .

Sözdizimi:

Biraz

Tag nitelikleri

otomatik oynatma - Ses sayfayı yükledikten hemen sonra çalmaya başlar;

kontroller. - Kontrol panelini ses dosyasına ekler;

döngü. - Tamamlanmasından sonraki başlangıçtan itibaren ses çoğaltılmasını tekrarlar;

Önyükleme. - Dosyayı web sayfasının indirilmesiyle birlikte indirmek için kullanılır;

src

Kapanış etiketi iyileştiricidir.
İç konteyner

Misal:

Video ekleyin. Etiket
Web sayfasındaki video ayarlarını ekler, çoğaltır ve kontrol eder. Dosyanın yolu özelliğe göre ayarlandı src veya iç içe geçmiş etiket .

Sözdizimi:

Biraz Elementler çeşitli dosyalarla ilişkilendirilebilir. Tarayıcı, ilk başlatılan formatı kullanacaktır.

Tag nitelikleri

otomatik oynatma - Video, sayfa yüklendikten sonra otomatik olarak oynatmaya başlar;

kontroller. - Kontrol panelini videoya ekler;

döngü. - Tamamlandıktan sonra başlangıçtan itibaren video oynatmayı tekrarlar;

yükseklik - Videoyu oynatmak için alanın yüksekliğini belirtir;

genişlik - Videoyu oynatmak için alanın genişliğini belirtir;

Önyükleme. - Web sayfasının indirilmesiyle birlikte video indirmek için kullanılır;

src - Oynanabilir dosyanın yolunu belirtir.

Kapanış etiketi iyileştiricidir.
İç konteyner

Misal:

Tarayıcıdaki örneğin sonucu:

Sitedeki müzik normdan oldukça nadirdir. Siteye müzik ekleyerek, bazı kullanıcıların yapabileceğini ve iteceğini anlamanız gerekir. Bu yazıda, siteye müzik ekleyen birkaç seçeneğe bakacağız, ayrıca arka plan müziği yapmayı düşünün.

Siteye arka plan müzik eklemek nasıl

Sitede arka plan müziği eklemek, ziyaretçileri kaybetme açısından en tehlikeli seçenektir. Arka plan müziği, kapanmanın imkansız olduğu için yeterli olmadığı için, hacmine de ayarlanamaz (hepsi bilgisayardaki akım hacmine bağlıdır). Yani arka plan müziği takmadan önce yüzlerce kez düşünmeniz gerekir.

HTML'de müzik takmanın iki yolu vardır.

Seçenek 1. HTML Etiketi ile

Arka plan müziği eklemek için sözdizimi

Taga Birkaç özellik var:

• lOOP \u003d "değeri" - müzik tekrarları sayısı (eğer -1 ise, sonsuz şekilde tekrarlanır)
• denge \u003d "değer" - stereo dengesi (-5000'den 10.000'e kadar)
• hacim \u003d "değer" - hacim (0 maksimum, -10000 minimum)

Sayfayı indirirken müzik otomatik olarak oynatılır.

Örneğin

Seçenek 2. Etiket aracılığıyla

Müzikle bir nesne eklemek için sözdizimi

Taga Aşağıdaki özellikleri kullanmak mümkündür:

• genişlik \u003d "değer" - genişlik (piksel veya yüzde)
• yükseklik \u003d "değer" - yükseklik (piksel veya yüzde olarak)
• align \u003d "Değer" - Hizalama (Sol - Sol, Sağ - Sağ, Merkez - Merkez)
• hidden \u003d "değer" - panelin görünürlüğü (doğru - gizle, yanlış - göster), varsayılan panel görünür
• autostart \u003d "değer" - yüklenirken müzik çalın (true - evet, false - no)
• lOOP \u003d "Değer" - Değer True - Bir daire içinde oynayın, yanlış - bir kez

Örneğin

Her tarayıcı, farklı şekillerde düzenli bir oyuncuya benzeyecek, bu yüzden her birini ayrı ayrı düşünmeyeceğiz.

HTML5'te etiketi kullanabilirsiniz

Etiketin anlamı

Sözdizimi etiketi

Aşağıdaki özellikler kullanılabilir:

• autoPlay \u003d "Değer" - Bir sayfa indirirken hemen müziği etkinleştirin
• kONTROLLER \u003d "değer" - Tarayıcıdaki oyuncu kontrol panelini görüntüleyin
• loop \u003d "anlamı" - döngüselden sorumlu
• preload \u003d "value" - Sayfa indirme ile hemen müzik indirin

Benim düşüncemdeki düşünce seçenekleri ideal çözümler değil, çünkü hepsi normal oyunculara dayanıyor. Her tarayıcı kendi varsayılan oynatıcısına sahip olacak ve bazılarında hiç çalışamaz. Bu nedenle, oynatıcıyı sitenize indirmek ve müzik indirmek en iyisidir. Bu oynatıcı bir durdurma işlevi, ses seviyesi ayarları vb. - Basit bir kullanıcı için gerekli tüm ayarlar.

Bu soru çok sık bulunur, bu yüzden derslerde derslerde ayrı bir makale ayırmaya karar verdim. Tüm tarayıcılar için sesli evrensel teknolojiyi çalmak için, HTML'nin bu sorunu çözmek için, çoğu sitede yapıldığı gibi, ses çalar dosyasını indirmeyi öneririm. Her şeyi adımlardaki yapıyoruz:

1. Sitenizin kök dizininde bulunduğu barındıran barındırma (dizin dosyasının bulunduğu klasör), ses klasörünü eşleştirin. Gelecekte, tüm ses dosyalarını yerleştireceksiniz.

3. Şimdi MP3 formatında daha iyi olan istenen dosyaları seçin. Klasör oluşturun ses. Sitenin kökeninde ve indirin.

4. Sadece oyuncu bağlantı kodunu takmak için kalır. Herhangi bir siteye doğru yerde uygun olacaktır. Yalnızca oynatıcı dosyasına ve ses dosyasının yolunu sırasıyla belirtmeli, kelimeleri değiştirmelisiniz. your_domen ve name_audio_file:

Ve her şey hazır! Görebilir ve çalışabilirsin. misal.

HTML'de arka plan müzik nasıl kurulur

HTML ve tarayıcının yeteneklerini kullanıyorum, arka plan müziğini sayfaya da ekleyebilirsiniz. İstediğiniz formatın bir ses dosyasına ihtiyacınız olacaktır: WAV, AU, MIDI veya MP3. Herhangi bir dosyayı belirtilen uzantıya örnek olarak kullanabilirsiniz.

İlk yöntem - Bu gömülü etikettir. Gömme öğesi, nesneleri (örneğin, video dosyaları, flaş silindirleri, bazı ses dosyaları vb.) İndirmek ve görüntülemek için kullanılır. Tarayıcının anlamadığı.

Sözdizimi oldukça basittir:

Kapanış etiketi gerekli değildir.

Şimdi özniteliklerle yazma örneğini ve bunların kod çözülmesiyle ilgili bir örneği görüyoruz:

Nitelikler HTML'de ses çalmak için etiket embed
Genişlik - Pikselli Panel Genişliği (veya Yüzde)
Panelin yüksekliği piksel cinsinden (veya yüzde)
Hizala - Panelin konumu metne göre, mümkün sol, sağ, merkez
Gizli - Paneli gizlemenizi, öznitelik değerlerini saklamanızı sağlar: Doğru - Panel Gizlidir, Yanlış - Panel Görünür (varsayılan değer)
Autostart - True - Player, sayfa yüklendiğinde otomatik olarak başlar, yanlış oynatma düğmesini bekliyor
Döngü - Döngü, True - Bir daire içinde ve yanlış değeri ile - sadece bir kez

İkinci yol. Çok eski, ama aynı zamanda pratik) Aynı klasöre (dizininizin), dosyanızın yalan söylediği ve vücutta bir melodi ekleyin, aşağıdaki kodu yazacaksınız:

Sonuç olarak, sayfayı yükledikten sonra, BGSound etiketinde belirtilen melodi ses çıkarır. Şimdi daha iyi öznitelik etiketi düşünün :

src - Ses dosyanızın yolu
döngü. - Kaç kez melodiyi tekrarlayabilir (eğer -1 ise, sonsuz şekilde tekrarlanır)
denge. - Stereo dengesinin değeri (-5000'den 10.000'e kadar)
sES. - Hacim Yüksekliği Melodi, burada maksimum ve -10000 minimum.

Bununla birlikte, bir şekilde oynatıcıyı kontrol etmek mümkün olmayacak - sayfanın her gün güncellendiğinde, parça tekrar oynatılır.

Arka plan müziği ekleme yöntemini açıkladıktan sonra, sizi bundan kurtulmak istiyorum, çünkü çoğu kullanıcının çeşitli siteleri ziyaret ettiği zaman zaten müzik dinliyor. Bu nedenle, müzikal eşlemenin geçmesi yalnızca sekmeyi siteyle kapatmak için kapatılabilir.

HTML5'te ses ve müzik ekleyin - Tag ses

ses. - Sitede arka plan sesi, müzik veya diğer ses akışını tanımlayan bir çift etiketi.

Nitelikler Tag ses.

otomatik oynatma- Sayfayı yüklerken derhal oynatılır (arka plan müziğine benzer BGSOUND)
kontroller. - Tarayıcıdaki oyuncu kontrol panelini görüntüleyin
döngü. - sona erdikten sonra dosyayı kaybeder
Önyükleme. - İndirme sayfası ile ses dosyası oluşturulacak
src - Ses dosyasına yol (MP3 veya OGG)

Sesli etiketlenmiş örnek kod

HTML 5'te Ses