Cara Menambahkan Lagu Atau Musik Pada Web
Dunia Programming - Oke, kali ini saya akan membuat tutorial bagaimana cara menambahkan lagu atau musik di blog, web atau web offline (tanpa domain) buatan kalian, oke sebelum memulai tutorialnya saya akan sedikit bercerita Tentang fungsi menambahkan musik pada web atau blog kita.
Elemen yang nantinya kalian gunakan untuk memasukkan file audio pada halaman web atau blog yaitu <audio> dan </audio>
Untuk memasukkan suara pada html atau blog kalian, bisa menggunakan tag <audio>. Untuk format suara yang telah didukung hingga sekarang yaitu MP3, Ogg dan WAP. Untuk File-file Audio yang didukung pada HTML5 adalah MP3, WAV, dan OGG, tidak semua file audio tersebut didukung oleh semua browser.
Cara Menambahkan Lagu Atau Musik Pada Web |
Elemen yang nantinya kalian gunakan untuk memasukkan file audio pada halaman web atau blog yaitu <audio> dan </audio>
Untuk memasukkan suara pada html atau blog kalian, bisa menggunakan tag <audio>. Untuk format suara yang telah didukung hingga sekarang yaitu MP3, Ogg dan WAP. Untuk File-file Audio yang didukung pada HTML5 adalah MP3, WAV, dan OGG, tidak semua file audio tersebut didukung oleh semua browser.
Cara Menambahkan Lagu atau Musik Pada Website
Berikut daftar format yang didukung :
- OGG merupakan format audio yang didukung oleh Mozilla firefox, Opera, dan Google Chrome.
- MP3 merupakan format audio yang didukung oleh Google Chrome dan Safari
- WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera
Namun seiring berkembangnya zaman, semua format sudah bisa digunakan, tinggal kita sesuaikan saja dengan format audio yang ingin kita putar
Jadi jika kalian tidak bisa memutar hasil embeded MP3 diweb yang telah kalian buat tersebut, hal tersebut dikarenakan browser yang kalian gunakan tidak support pada file berekstensi MP3.
Contoh :
Atribut-atribut yang digunakan pada tag <audio>.
Jadi jika kalian tidak bisa memutar hasil embeded MP3 diweb yang telah kalian buat tersebut, hal tersebut dikarenakan browser yang kalian gunakan tidak support pada file berekstensi MP3.
<!doctype html>
<html>
<head>
<title>Cara Menambahkan Lagu</title>
</head>
</body>
<audio controls>
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>
</body>
</html>
Oke, script diatas kalian copy, kemudian jadikan dalam satu folder music dan file .html nya"Terus kalau Filenya kan jadi Nyampur ama file .html nya dong Min...?"Memang bercampur, tapi anda juga bisa membuat folder lagi didalam file .html tersebut
Contoh :
Atribut-atribut yang digunakan pada tag <audio>.
Autoplay : memulai audio secara otomatis setelah anda buka web kalian, <audio autoplay="autoplay">.
Controls : Menampilkan Kontrol seperti Volume, audio dan juga tombol untuk memulai/pause, <audio controls="controls">.
Loop : Mengulang audio kembali, setelah audio selesai diputar, <audio loop="loop">.
Muted : Mematikan Suara, <audio muted="muted">.
Src : Value dari src adalah file audio tersebut beserta lokasinya,
<audio><source src=".../.../house.mp3"></audio>.
Audio : Alamat URL. Oke sekarang Kita Mulai, cara memasangnya pada blog
Cara menambahkan Musik di Blog atau Web ada 2 Cara Yaitu :
1. Dengan Cara Mengambil Link atau alamat lagu atau musik atau dari blog lain
Sudah jangan Nayak dulu, nantik gak selesai-selesai nih tutorial, hehhe.
Controls : Menampilkan Kontrol seperti Volume, audio dan juga tombol untuk memulai/pause, <audio controls="controls">.
Loop : Mengulang audio kembali, setelah audio selesai diputar, <audio loop="loop">.
Muted : Mematikan Suara, <audio muted="muted">.
Src : Value dari src adalah file audio tersebut beserta lokasinya,
<audio><source src=".../.../house.mp3"></audio>.
Audio : Alamat URL. Oke sekarang Kita Mulai, cara memasangnya pada blog
Cara menambahkan Musik di Blog atau Web ada 2 Cara Yaitu :
1. Dengan Cara Mengambil Link atau alamat lagu atau musik atau dari blog lain
"Ehh.. Min, emang bisa ya...? Tanpa harus mendownload terlebih dahulu...?Bisalah, Untuk Cara pertama ini biasanya dilakukan pada para blogger atau domain free, Karena dalam domain free biasanya (Yang saya ketahui) Tidak ada tempat penyimpanan file-file, Jadi jika ingin menambahkan lagu atau musik, anda harus mencari lagu yang kalian inginkan lalu click kanan lagu yang akan kalian tambahkan diblog kalian
Sudah jangan Nayak dulu, nantik gak selesai-selesai nih tutorial, hehhe.
<!doctype html>
<html>
<head>
<title>Cara Menambahkan Lagu Di Web Onlien</title>
</head>
</body>
<audio controls>
<source src="http://adserver.adreactor.com/servlet/view/window/url/zone?zid=40&pid=697.mp3" type="audio/mp3">
</audio>
</body>
</html>
2. Cara kedua Yaitu Dengan menambahkan lagu dengan satu Folder"Ehhh... Bentar-bentar min, katanya tadi di blog gak ada tempat penyimpanan file, lha sekarang kok ada...?"Memang tidak ada kalau diblog, cara kedua ini hanya bisa digunakan pada Web Offline atau buatan tanpa ada domain.
"Maksutnya, buat sendiri di Notepad++ atau Dreamweaver itu ya...?"Yap, betul sekali
<!doctype html>
<html>
<head>
<title>Cara Menambahkan Lagu Di Web Offline</title>
</head>
</body>
<audio controls>
<source src="music/house.mp3" type="audio/mp3">
</audio>
</body>
</html>
Cara Menambahkan Musik Youtube Pada Website
Cara terakhir yang banyak di cari oleh programmer pemula adalah, memasukkan audio youtube kedalam website yang kita buat, mungkin tutorial ini sudah saya update karena memang banyak sekali perubahan code.
Jadi kalian bisa gunakan cara di bawah ini untuk memasukkan audio youtube atau musik youtube kedalam website kalian.
berikut langkah-langkah yang harus kalian lakukan agar bisa menggunakan audio atau musik youtube pada website buatan kalian:
- Buka Youtube
- Cari Musik atau Audio yang ingin masukkan kedalam website
- Kemudian klik tanda bagikan pada bagian bawah video youtube
- Kemudian klik Sematkan
- Copy code yang tampilan setelah klik Sematkan
- Kemudian buka code website kalian, setelah itu letakkan code audio youtube yang sudah kalian copy tadi, lalu pastekan ke di bawah <body> diatas </body>
- Kemudian tambahkan code ?autoplay=1 setelah link youtube, kemudian tambahkan allow="autoplay" dan hidden pada tag iframe youtube yang sudah kalian paste tadi
- Setelah itu simpan dan lihat hasilnya
- Pastikan Laptop atau device anda terhubung dengan internet
Berikut code yang saya copy dari youtube dan sudah saya tambahkan beberapa perintah sesuai dengan tutorial yang saya jelaskan diatas
<iframe hidden width="560" height="315"
src="https://www.youtube.com/embed/3-PFuVHaCYg?autoplay=1"
allow="autoplay"
title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Jika terdapat kesalahan dalam penulisan script, kalian bisa tinggalkan komentar pada postingan artikel ini, atau kalian juga bisa kirimkan pesan kalian melalui alamat email saya, yang berada pada footer blog (Tombol Contact). Semoga bermanfaat, terimakasih.
Mau tanya kang, klo mau dari youtube gmn ya script nya, udh di kutak katik gagal mulu..semoga di jawab..makasi
ReplyDeleteudah saya kasih tutornya diatas, sudah saya coba dan work, silahkan di gunakan
Deletecara yang dari web lain gmn bang ?
ReplyDeletemaksutnya gimana? ambil audio dr web lain? atau mau menggunakan audio untuk web online?
Deletekalau website pakai cpanel,di mana kita nyimpan scriptnya bang......
ReplyDeletePergi ke Menu File Manager > public_html nah km upload scriptnya disana, berlaku bagi yang berbayar, ataupun gratis, selamat mencoba
DeleteThanks banget tutorialnya bang
ReplyDeletebang, sudah saya coba, di replit tempat codingnya sih ada backsound. tapi kalau buka webnya ga ada backsoundnya bang. ada yang salah di salah kah?
ReplyDelete