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. Show
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:
Berikut code yang saya copy dari youtube dan sudah saya tambahkan beberapa perintah sesuai dengan tutorial yang saya jelaskan diatas Tahukah kalian selain teks dan gambar, yang namanya konten website juga dapat berupa audio. Dalam dunia digital yang perkembangannya semakin pesat ini banyak sekali bermunculan konten audio seperti musik, audiobook, hingga yang sedang trend saat ini yaitu podcast. Semua konten audio tersebut sangat memungkinkan bisa diputar melalui web browser. Lantas, bagaimana caranya? Simak pembahasan berikut 🙂 Menambahkan Audio di HTMLDahulu sebelum dikembangkannya HTML menjadi HTML 5, para pengguna yang ingin menikmati audio diwajibkan untuk menginstal software eksternal seperti flash player. Namun sekarang kita tidak memerlukan hal itu, karena dalam HTML 5 sudah tersedia tag tersendiri untuk memutar audio, yaitu dengan menggunakan tag <audio>. Tag <audio> digunakan untuk membuat atau menambahkan audio player di browser. Untuk lebih lengkapnya perhatikan gambar di bawah ini. Sebelum mencoba untuk menerapkan kalian bisa download dulu audionya di sini Bensound. Buka teks editor, tulis kode di bawah ini, dan simpan dengan nama index.html.
Untuk file audionya saya rename menjadi creativeminds.mp3 dan pastikan file index.html beserta file audio terletak satu folder agar mudah untuk menentukan alamat filenya. Hasilnya, Atribut Untuk Tag <audio>Ada 6 atribut yang dapat digunakan untuk mengatur tag <audio>, antara lain: Atribut controlsAtribut controls digunakan untuk menampilkan atau mengaktifkan tombol kontrol audio seperti tombol play, pause, stop, volume, dan minute scroll. Karena nilai atribut controls berupa nilai boolean maka kita dapat mendefinisikannya dengan dua cara yaitu seperti di bawah ini.
Hasilnya akan sama saja. Atribut autoplayAtribut autoplay akan membuat file audio berputar secara otomatis. Nilai masukan dari atribut autoplay adalah nilai boolean yaitu true dan false. Jika nilai yang dimasukkan true maka file audio akan diputar secara otomatis, sedangkan jika false maka tidak diputar secara otomatis. Atribut autoplay juga memiliki dua cara pendefinisian bila bernilai true.
Keluaran: Sebagai catatan, kemungkinan atribut autoplay tidak bekerja di Google Chrome karena ada beberapa kebijakan baru dalam memutar audio. Sebagai gantinya coba kalian jalankan pada browser seperti Mozilla Firefox, Microsoft Edge, dan lain-lain. Atribut loopAtribut loop akan membuat file audio diputar secara berulang-ulang. Cara kerja atribut ini sama dengan fitur repeat one di pemutar audio handphone kita. Sama seperti atribut yang lain, nilai atribut loop juga berupa boolean yang berarti hanya ada dua true dan false. Contoh penerapan
Keluaran: Atribut mutedAtribut muted digunakan untuk mensenyapkan audio. Jadi ketika atribut ini ditambahkan maka secara default volume dari file audio yang diputar beralih ke mode senyap. Nilai yang diberikan juga berupa nilai boolean, true dan false.
Keluaran, Atribut preloadAtribut preload akan menunjukkan seberapa penting file audio harus dimuat ketika halaman web yang terkait juga akan dimuat. Atribut preload memiliki tiga nilai yaitu auto, metadata, dan none.
Keluaran: Atribut srcSudah sering kali dijelaskan bahwa atribut ini berfungsi untuk menentukan alamat lokasi atau sumber dari beberapa file media seperti gambar, audio, dan lain-lain. Dalam penerapan sebelumnya atribut ini disisipkan ke dalam tag <source>, namun sebenarnya atribut ini juga dapat disisipkan ke dalam tag <audio>.
Keluaran: Nah sekarang pertanyaannya, Apa perbedaan kita menyisipkan atribut src pada tag audio dan tag source? Untuk menjawab pertanyaan di atas kita perlu mengenal tag <source> terlebih dahulu. Mengenal Tag <source>Ketika kita ingin menambahkan audio ke file atau dokumen HTML, ada beberapa poin yang perlu diperhatikan supaya audio yang ditambahkan nantinya bisa diputar secara benar oleh pengguna. Dari beberapa poin tersebut yang paling utama adalah apakah browser yang dipakai oleh pengguna dapat memutar file audio secara benar dan tanpa masalah? Karena beberapa browser open source contohnya Firefox tidak mendukung format file audio tertutup seperti WMV dan hanya dapat memutar format file audio OGG. Maka dari itu peran tag <source> sangat dibutuhkan di sini. Tag <source> merupakan jenis tag yang berdiri sendiri atau dalam konteks elemen yang berarti elemen kosong (empty elemen).
Tag <source> memungkinkan kita untuk menambahkan beberapa jenis format file audio sekaligus ke dalam elemen <audio> yang mana ini akan membuat browser lebih leluasa untuk memilih format file mana yang dapat ia putar.
Keluaran: Hasil yang dikeluarkan tetap memutar satu file audio, karena browser hanya memilih satu dari sekian banyak format file audio yang tersedia, yang mana mungkin saja hanya format file tersebutlah yang dapat ia putar. Ada dua atribut penting yang perlu diingat untuk menentukan file audio beserta formatnya, antara lain.
Format File Audio yang Didukung HTML 5Tidak semua format file atau ekstensi audio didukung oleh HTML 5, tercatat hanya beberapa format file berikut yang didukung oleh HTML 5. FormatContainerMIME TypeAACAACaudio/aacAACAACaudio/aacpAACMP4audio/mp4FLACFLACaudio/flacFLACOggaudio/oggMP3MP3audio/mpegOpusOggaudio/oggOpusWebMaudio/webmPCMWAVaudio/wavVorbisOggaudio/oggVorbisWebMaudio/webmFormat file MP3 dan MP4 merupakan format yang sering digunakan karena ukuran filenya relatif kecil. Sedangkan untuk file FLAC memiliki ukuran yang relatif besar karena kualitas tinggi yang dimilikinya. Bagaimana cara memasukkan audio di HTML?Cara Menambahkan Audio di HTML
Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source> . Perhatikan! Pada atribut src , kita menulis langsung nama file audio yang akan diputar.
Apa elemen HTML yang benar untuk memutar file audio?Tag yang digunakan untuk menampilkan audio dalam HTML disebut dengan tag <audio> dalam penulisannya tag audio juga harus ditutup dengan penutup tag </audio> .
Tag apa yang digunakan untuk menyisipkan audio kedalam dokumen HTML?Tag <audio> digunakan untuk membuat atau menambahkan audio player di browser.
|