Mengapa Anda membutuhkan musik di situs?

Pertanyaan yang cukup menarik, pemutaran file musik atau suara di situs, atau pemutar bawaan membantu pengunjung situs untuk bersantai, membangkitkan emosi dan nada positif dengan cara yang benar, sehingga dapat dikatakan, memfasilitasi interaksi dengan situs. Tetapi efek ini hanya berfungsi ketika musik di situs dipilih dengan benar dan volume suara tidak melebihi batas yang diizinkan, jika tidak semua upaya Anda akan sia-sia dan menimbulkan emosi negatif di antara pengunjung situs.

Bagaimana cara menyematkan audio (musik) di situs web dalam html?

Kami sering ditanya pertanyaan ini, musik di situs adalah elemen yang relevan dan kreatif, dan ada banyak cara untuk mereproduksinya dan tidak begitu sulit untuk diterapkan. Untuk memulainya, setiap pengguna Jaringan global menggunakan browser apa pun untuk mengakses Internet, tetapi tidak ada teknologi umum dan universal untuk memutar file suara dan musik, setiap browser bekerja sesuai dengan algoritmenya sendiri dan mereka agak berbeda satu sama lain, oleh karena itu, saat memutar musik dengan menyematkan HTML halaman kode, masalah mungkin timbul ... Tapi seperti yang Anda tahu, semua masalah bisa diselesaikan!

Sematkan musik di situs web Anda dengan cara HTML, JavaScript, jQuery, AJAX:

1 cara.

Membuat pemutar audio untuk musik atau pemutar situs

Teknologinya sederhana, file pemutar dibuat agar tidak memuat situs atau server, kami memilih teknologi yang akan kami gunakan: JavaScript, jQuery, AJAX... Berdasarkan teknologi yang dipilih, kami mengembangkan skrip untuk situs kami dan memasukkannya ke dalam situs. Skrip dibuat tergantung pada apa yang Anda butuhkan: pemutaran otomatis musik latar di situs atau pemutar yang dikendalikan oleh pengunjung. Selanjutnya, buat folder di root situs untuk musik dan muat file audio ke dalamnya.

Atau, sebagai alternatif sopsob, Anda dapat membuat pemutar menggunakan teknologi flash (Flash), pemutar semacam itu akan terlihat lebih mengesankan. Sebenarnya akan lebih mahal dan lebih sulit untuk situs (itu akan meningkatkan waktu pemuatan halaman situs).

Metode 2.

Memasang musik di situs menggunakan HTML

Menggunakan kemampuan HTML dan browser, Anda dapat memasukkan pemutar atau musik latar di situs. Teknologinya sama sederhananya: kode HTML5 dibuat dengan tag "audio" dan kode ini ditulis ke dalam situs, dan ketika pengguna mengunjungi situs ia melihat pemutar yang diperkecil, pengunjung mengklik tombol putar atau secara otomatis mulai memutar latar belakang musik. Jenis pemutar akan bergantung pada browser tempat pengunjung masuk, tetapi fungsinya akan tetap standar: tombol Putar, Berhenti, Berikutnya, Sebelumnya, Volume. Pemain dengan kode HTML terlihat seperti ini:

Kode embed yang sebenarnya terlihat seperti ini:

Seperti yang mungkin Anda perhatikan, perintah "controls autoplay" memungkinkan pemutaran otomatis musik segera setelah pengunjung memasuki situs.

Versi alternatif dari kode HTML adalah tag "bgsound", ini sama sekali tidak menggunakan pemutar visual, ketika Anda mengunjungi situs, musik di situs akan mulai diputar, tetapi sesuaikan volume, jeda, dll. pengguna tidak akan bisa. Mengatur volume pemutaran file suara dikonfigurasi dalam kode itu sendiri.

Format file suara untuk memutar musik di situs bisa ada: WAV, AU, MIDI, MP3, OGG (ekstensi). File musik diunggah ke situs, atau tautan digunakan ke situs-situs tempat file suara berada, yang utama adalah bahwa itu ada di domain publik.

Seberapa sering Anda harus mencari musik favorit Anda di Internet? Persis yang Anda dengar di situs favorit Anda ( jaringan sosial, portal musik). Sering terjadi bahwa dia tidak ada di tempat lain.
"Pencari" yang lazim akan mengatakan bahwa ini tidak benar. Tapi mari kita pertimbangkan rata-rata pengguna, yang pengetahuan teknologinya tidak memungkinkan untuk beroperasi dengan "menggali" kode sumber halaman atau cache.

Kebetulan sebagian besar teman saya hanyalah pengguna seperti itu. Untuk merekalah diputuskan untuk menulis ekstensi ini Chrome (dan lainnya seperti dia).

Apa yang bisa

• Unduh file audio apa pun dari situs mana pun(mp3, wav)
• Benar mengidentifikasi nama asli
• Menunjukkan durasi, ukuran, dan kecepatan bit
• Unduh di halaman yang sama dengan trek (tanpa pengalihan)
• Mempratinjau file

Coba ekstensi dari toko Chrome

Beberapa gambar dan video:

Saya akan senang menerima kritik yang sehat. Saya harap seseorang akan menemukan ekstensi ini berguna.
Jika Anda tertarik, maka dalam waktu dekat saya akan menerbitkan ulasan kode sumber di hub lain dan mempostingnya di github.
Juga berencana untuk port ke Firefox dan IE.

P.S> Kemampuan untuk mengunduh video juga ada, tetapi di saat ini dinonaktifkan (ada masalah kecil dengan streaming video).

bahasa HTML
Sisipkan audio dan video

Masukkan suara. Menandai
Menambahkan, memutar, dan mengelola pengaturan perekaman audio di halaman web. Jalur file ditentukan melalui atribut src atau tag bersarang .

Sintaksis:

Beberapa

Tandai atribut

putar otomatis- suara mulai diputar segera setelah memuat halaman;

kontrol- menambahkan panel kontrol ke file audio;

lingkaran- mengulang pemutaran suara dari awal setelah selesai;

pramuat- digunakan untuk mengunduh file bersama dengan memuat halaman web;

src

Tag akhir wajib diisi.
Di dalam wadah

Contoh:

Sisipkan video. Menandai
Menambahkan, memutar, dan mengelola pengaturan video di halaman web. Jalur file ditentukan melalui atribut src atau tag bersarang .

Sintaksis:

Beberapa item dapat ditautkan ke file yang berbeda. Browser akan menggunakan format pertama yang diluncurkannya.

Tandai atribut

putar otomatis- video mulai diputar secara otomatis setelah memuat halaman;

kontrol- menambahkan panel kontrol ke video;

lingkaran- mengulang pemutaran video dari awal setelah selesai;

tinggi- mengatur ketinggian area untuk pemutaran video;

lebar- mengatur lebar area untuk pemutaran video;

pramuat- digunakan untuk mengunduh video bersamaan dengan memuat halaman web;

src- menunjukkan jalur ke file yang sedang diputar.

Tag akhir wajib diisi.
Di dalam wadah

Contoh:

Contoh hasil di browser:

Musik di situs ini lebih jarang daripada biasanya. Saat memasukkan musik di situs, Anda perlu memahami bahwa itu bahkan dapat mengasingkan beberapa pengguna. Pada artikel ini, kita akan melihat beberapa opsi untuk menyematkan musik di situs, dan juga melihat cara membuat musik latar.

Cara menyematkan musik latar di situs web

Memasukkan musik latar di situs web adalah opsi paling berbahaya dalam hal kehilangan pengunjung. Karena musik latar tidak hanya tidak mungkin dimatikan, tetapi juga volumenya tidak diatur dengan cara apa pun (semuanya tergantung pada volume saat ini di komputer). Jadi, Anda harus berpikir seratus kali sebelum memasukkan musik latar.

Ada dua cara untuk memasukkan musik ke dalam html

Opsi 1. Melalui tag html

Sintaks untuk menempelkan musik latar

Menandai ada beberapa atribut :

• loop = "nilai" - jumlah pengulangan musik (jika -1, maka berulang tanpa batas)
• keseimbangan = "nilai" - keseimbangan stereo (dari -10000 hingga 10000)
• volume = "nilai" - volume (0 maksimum, -10000 minimum)

Musik akan diputar secara otomatis saat halaman dimuat.

Sebagai contoh

Opsi 2. Melalui tag

Sintaks untuk menyisipkan objek dengan musik

Menandai atribut berikut dapat digunakan:

• lebar = "nilai" - lebar (dalam piksel atau persentase)
• tinggi = "nilai" - tinggi (dalam piksel atau persen)
• align = "nilai" - perataan (kiri - kiri, kanan - kanan, tengah - tengah)
• tersembunyi = "nilai" - visibilitas panel (benar - sembunyikan, salah - tampilkan), secara default panel terlihat
• autostart = "nilai" - memutar musik saat mengunduh (benar - ya, salah - tidak)
• loop = "nilai" - nilai benar - putar dalam satu lingkaran, salah - sekali

Sebagai contoh

Untuk setiap browser, pemutar standar akan terlihat berbeda, jadi kami tidak akan mempertimbangkan masing-masing secara terpisah.

Dalam html5 tag dapat digunakan

Arti menggunakan tag

Tag sintaks

Atribut berikut dapat digunakan:

• putar otomatis = "nilai" - putar musik segera saat memuat halaman
• kontrol = "nilai" - tampilkan panel kontrol pemain di browser
• loop = "nilai" - bertanggung jawab untuk perulangan
• preload = "value" - segera memuat musik dengan pemuatan halaman

Opsi yang dipertimbangkan, menurut saya, bukanlah solusi ideal, karena semuanya didasarkan pada pemain standar. Setiap peramban akan memiliki pemutar bawaannya sendiri, dan di beberapa peramban mungkin tidak berfungsi sama sekali. Oleh karena itu, yang terbaik adalah mengunduh pemutar ke situs web Anda dan mengunduh musik darinya. Pemain seperti itu akan memiliki fungsi menghentikan, mengatur volume, dll. - semua set yang diperlukan untuk pengguna sederhana.

Pertanyaan ini sangat sering muncul, jadi saya memutuskan untuk mencurahkan artikel terpisah untuk itu dalam pelajaran. Karena HTML tidak memiliki teknologi universal untuk memutar audio untuk semua browser, untuk mengatasi masalah ini saya mengusulkan untuk mengunduh file pemutar audio, seperti yang dilakukan di sebagian besar situs. Kami melakukan semuanya dalam langkah-langkah:

1. Di hosting, tempat situs Anda berada, di direktori root (folder tempat file indeks berada), buat folder audio. Di masa depan, Anda akan menempatkan semua file audio di dalamnya.

3. Sekarang pilih file yang Anda inginkan, sebaiknya dalam format mp3. Buat folder audio di root situs dan mengunggahnya.

4. Yang tersisa hanyalah memasukkan kode koneksi pemutar. Sangat cocok untuk situs mana pun Di tempat yang tepat, Anda hanya perlu menentukan jalur ke file pemutar dan file audio, mengganti kata-kata yang sesuai domain_anda dan audio_file_name:

Dan Anda sudah selesai! Anda juga dapat melihat karya contoh.

Cara mengatur musik latar di html

Menggunakan kemampuan HTML dan browser, Anda juga dapat menyisipkan musik latar di halaman. Anda akan memerlukan file audio dengan format yang benar: WAV, AU, MIDI atau MP3. Anda dapat menggunakan file apa pun dengan ekstensi yang ditentukan sebagai contoh.

Cara pertama adalah tag penyematan. Elemen embed digunakan untuk memuat dan menampilkan objek (misalnya, file video, film flash, beberapa file suara, dll.) yang pada awalnya tidak dipahami oleh browser.

Sintaksnya cukup sederhana:

Tidak diperlukan tag penutup.

Sekarang mari kita lihat contoh record dengan atribut, dan di bawah ini dengan decodingnya:

Sematkan atribut tag untuk memutar audio dalam html
lebar - lebar panel dalam piksel (atau persen)
tinggi - tinggi panel dalam piksel (atau persentase)
align - posisi panel relatif terhadap teks, nilai yang mungkin adalah kiri, kanan, tengah
tersembunyi - memungkinkan Anda untuk menyembunyikan panel, nilai atribut: true - panel disembunyikan, false - panel terlihat (nilai default)
autostart - nilai sebenarnya - pemain memulai secara otomatis saat halaman dimuat, salah - menunggu tombol putar ditekan
loop - loop, true - trek diputar dalam lingkaran, dan jika salah - hanya sekali

Cara kedua. Sangat tua, tetapi juga praktis) Tambahkan melodi ke folder (direktori) yang sama di mana file Anda berada, dan di badan tulis kode berikut:

Akibatnya, setelah memuat halaman, melodi yang Anda tentukan di tag bgsound akan berbunyi. Sekarang mari kita lihat lebih dekat atribut tag. :

src- jalur ke file audio Anda
lingkaran- berapa kali melodi diulang (jika -1, maka berulang tanpa henti)
keseimbangan- nilai keseimbangan stereo (dari -10000 hingga 10.000)
volume- volume melodi yang dimainkan, di mana 0 adalah maksimum, dan -10000 adalah minimum.

Namun, tidak mungkin untuk mengontrol pemutar dengan cara apa pun - setiap kali halaman disegarkan, trek akan diputar lagi.

Setelah menjelaskan metode memasukkan musik latar, saya ingin mencegah Anda dari hal ini, karena sebagian besar pengguna pada saat mengunjungi berbagai situs biasanya sudah mendengarkan musik. Oleh karena itu, musik pengiring hanya dapat memaksanya untuk menutup tab dengan situs tersebut.

Sisipkan audio dan musik dalam HTML5 - tag audio

audio- tag berpasangan yang mendefinisikan suara latar, musik, atau aliran audio lainnya di situs.

Atribut tag audio

putar otomatis- file langsung diputar saat halaman dimuat (mirip dengan musik latar bgsound)
kontrol- tampilkan panel kontrol pemutar di browser
lingkaran- memutar file lagi setelah selesai
pramuat- pengunduhan file audio akan terjadi bersamaan dengan pemuatan halaman
src- jalur ke file audio (mp3 atau ogg)

Contoh kode dengan tag audio

Audio dalam HTML 5