Memasukkan Audio Ke Halaman Website Dengan HTML

dalam HTML
Hosting Murah Berkualitas

Sekarang kita lanjutkan pembelajaran HTML kita ke Modul Pembelajaran HTML. Pada kesempatan kali ini saya akan mengajarkan kepada anda tentang bagaimana caranya Memasukkan Audio Ke Halaman Website Dengan HTML. Jadi, intinya adalah ketika orang mengunjungi website anda maka mereka bisa menikmati file audio yang sudah anda pasang pada website anda. Hal ini bisa anda lakukan agar para pengunjung merasa relaks dan tidak merasa jenuh dengan memperdengarkan suara seperti lagu ataupun suara lainnya.

Pada artikel ini saya akan menggunakan 2 cara dalam memasukkan file audio ke dalam halaman website anda.

  • Cara pertama, file audio tersebut akan di play ketika halaman website anda dibuka. Artinya file audio tersebut dipasang otomatis sebagai backsound ketika halaman website anda tampil. Menurut pengalaman saya, cara pertama ini bekerja dengan baik ketika dibuka di browser Internet Explorer bawaan windows anda. untuk browser yang lain silahkan anda coba sendiri.
  • Cara kedua, file audio tersebut akan di play jika pengunjung melakukan klik pada tombol yang ada pada playlist. Berdasarkan pengalaman saya juga, cara kedua ini bekerja dengan baik ketika dibuka di browser Mozilla Firefox. untuk browser yang lain silahkan anda coba sendiri.

Sebetulnya masih ada teknik lainnya yang bisa anda lakukan pada tema bahasan artikel ini, namun untuk mempersingkat waktu saya bahas dulu dengan kedua cara tadi diatas. Untuk cara lainnya nanti akan saya bahas lagi pada artikel lainnya sebagai tambahan dari tema bahasan ini.

Untuk melanjutkan pembelajaran di artikel ini, mari kita lanjutkan ke praktek bagaimana cara melakukan hal ini.

Memasukkan File Suara atau Audio Secara Otomatis Play Sendiri

Pada sub judul ini kita akan memasukkan file suara atau file audio ke halaman website kita agar ketika ada orang lain mengunjungi website kita maka file suara atau audio yang sudah kita pasang tersebut di play atau dimainkan secara otomatis.

Tag yang akan digunakan untuk memasukkan audio pada halaman website anda yaitu tag <bgsound src>

Untuk melakukan hal ini, silahkan anda buka file Notepad anda, lalu copy paste kode HTML dibawah ini pada Notepad anda.

<html>
<header>
<title>
Memasukkan File Suara Atau Audio Secara Otomatis Play Sendiri
</title>
<bgsound src=”Cool-colors-Tataplah.mp3″ loop=”-1″>
</header><body background=”belakang.jpg”>
<div align=”center”>
<h1><font color=”red”>Ini gambar kucing</font></h1><img src=”kucing.jpg” width=350 height=200 ></img>
<p align=”right”>
<font color=”red” size=5>Ini paragraf perataan kanan</font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</p>
</div><hr size=”2px”><div align=”center”>
<h1><font color=”red”>Ini gambar devil</font></h1>
<img src=”devil.jpg” width=350 height=200></img>
<p align=”left”>
<font color=”red” size=5>Ini paragraf perataan kanan</font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</p>
</div>
</body>
</html>

Setelah File Notepad anda terisi oleh kode-kode HTML diatas, maka silahkan anda save dalam format file HTML  dan beri nama sesuai dengan keinginan anda. Misalkan nama file nya adalah play-sound-otomatis.html dengan memberi ekstensi .html pada nama filenya.

Untuk mempercantik tampilan anda silahkan masukkan beberapa gambar dengan ekstensi file .jpeg pada satu folder. Beri nama file-file gambar tadi dengan nama file : kucing.jpg, devil.jpg, belakang.jpg. File tersebut sebetulnya tidak harus ada karena kita sekarang intens pada pembelajaran tentang bagaimana menampilkan file suara atau audio. Untuk itu silahkan anda masukkan file audio yang akan anda putar kedalam folder tadi yang sudah terisi oleh file gambar dan file play-sound-otomatis.html tadi. File audio yang harus anda simpan pada folder tadi harus berformat .mp3 sesuai dengan kode HTML tadi diatas yang di beri tanda warna biru yaitu pada tag  <bgsound src=”Cool-colors-Tataplah.mp3″ loop=”-1″>. Sesuai dengan kode tersebut beri nama file audio anda dengan nama file Cool-colors-Tataplah.mp3. atribut loop yang diisi nilai -1 pada tag <bgsound src> tadi dimaksudkan agar file audio tersebut di play ulang jika file audio tersebut selesai di play.

Jika file tersebut sudah lengkap, maka silahkan anda buka file tersebut menggunakan browser Internet Explorer anda, karena script ini berjalan dengan baik di browser ini. Caranya dengan klik kanan pada file play-sound-otomatis.html –> Open With –> Internet Explorer.

buka file play sound otomatis html

Maka File Audio Cool-colors-Tataplah.mp3 tadi akan di play ketika halaman website anda dibuka.

Jika anda belum faham dengan penjelasan tadi diatas, silahkan di tonton langsung saja Video Tutorialnya yang sudah saya siapkan dibawah ini.

Memasukkan File Suara atau Audio Dengan Playlist

Pada sub judul ini saya akan mengajarkan cara lainnya dalam memasukkan file audio pada halaman website anda. Pada cara kedua ini file audio tidak akan di play otomatis seperti sub judul yang pertama diatas. Dengan cara ini, jika ingin mendengarkan audio yang sudah dipasang maka pengunjung harus melakukan klik tombol play dulu pada playlist yang sudah disediakan. Cara kedua ini bekerja dengan baik jika dibuka menggunakan web browser Mozilla Firefox.

Tag yang akan kita gunakan untuk menampilkan playlist audio adalah sebagai berikut :

<audio controls>
<source src=”nama-file-audio.mp3” type=”audio/mpeg”>
</audio>

Untuk melakukan bagaimana cara menampilkan playlist audio ini, mari kita praktekkan sekarang. Caranya adalah sebagai berikut.

Silahkan buka Notepad anda lalu copy paste kode HTML dibawah ini.

<html>
<header>
<title>
Memasukkan File Suara Atau Audio Dengan Playlist
</title>
</header><body background=”belakang.jpg”>
<div align=”center”>
<br><br>
<audio controls>
<source src=”Cool-colors-Tataplah.mp3″ type=”audio/mpeg”>
</audio>
</body>
<h1><font color=”red”>Ini gambar kucing</font></h1><img src=”kucing.jpg” width=350 height=200 ></img>
<p align=”right”>
<font color=”red” size=5>Ini paragraf perataan kanan</font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</p>
</div><hr size=”2px”><div align=”center”>
<h1><font color=”red”>Ini gambar devil</font></h1>
<img src=”devil.jpg” width=350 height=200></img>
<p align=”left”>
<font color=”red” size=5>Ini paragraf perataan kanan</font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font></p>
</div></body>
</html>

Setelah File Notepad anda terisi oleh kode-kode HTML diatas, maka silahkan silahkan anda lakukan hal yang sama seperti cara yang pertama tadi diatas yaitu anda save kode HTML diatas dalam format file HTML  dan beri nama sesuai dengan keinginan anda. Misalkan nama file untuk cara yang kedua ini nama filenya adalah play-sound-playlist.html dengan memberi ekstensi .html pada nama filenya.

Simpan file play-sound-playlist.html anda tadi satu folder dengan file-file gambar seperti yang sudah disebutkan pada cara pertama tadi yaitu file gambar : kucing.jpg, devil.jpg, belakang.jpg. Jangan lupa juga masukkan File audio yang berformat .mp3 yang akan anda putar tersebut satu folder dengan file-file tadi diatas.

Pemanggilan file audio pada kode HTML diatas ditunjukkan pada tag  <source src=”Cool-colors-Tataplah.mp3″ type=”audio/mpeg”>. Sesuai dengan kode tersebut beri nama file audio anda dengan nama file Cool-colors-Tataplah.mp3 tersebut.

Jika file tersebut sudah lengkap, maka silahkan anda buka file tersebut menggunakan browser Mozilla Firefox anda, karena script ini berjalan dengan baik di browser ini. Caranya dengan klik kanan pada file play-sound-otomatis.html –> Open With –> Mozilla Firefox atau klik 2x pada file play-sound-playlist.html anda jika default browser yang digunakan pada komputer anda itu memang Mozilla firefox. Maka tampilannya playlist audio tadi akan tampak seperti gambar dibawah ini.

buka file play sound playlist html

Tampilan dari playlist audio bisa anda lihat pada objek paling atas pada gambar diatas. Ketika halaman website ditampilkan, file audio tidak otomatis di play kecuali jika anda mengklik tombol play pada playlist tersebut. Dengan slider yang ada pada playlist tersebut anda bisa memutar file audio tersebut loncat ke timer menit yang keberapa pun yang anda mau. Anda bisa loncat ke menit awal maupun ke menit akhir ataupun ke menit pertengahan dari file audio tersebut.

Jika anda belum faham bagaimana memasukkan file audio dengan cara yang ke 2 ini, maka silahkan anda tonton Video Tutorial yang sudah saya buat untuk anda. Silahkan anda tonton dan praktekkan langsung sesuai dengan yang saya lakukan pada Video Tutorial tersebut. Silahkan di tonton Video Tutorialnya dibawah ini.

Bagi anda yang ingin melihat Video Tutorialnya Langsung, silahkan anda lihat di video berikut melalui Link yang dibawah ini. Atau Jika anda ingin melihat semua Video Tutorial Pembelajaran lainnya yang sudah saya upload ke youtube, maka silahkan anda kunjungi saja channelnya dengan klik link ini.

Channel Tutorial :

https://www.youtube.com/channel/UC-FBAJCJ8akIf2TG1hf959A

Channel Hiburan :

https://www.youtube.com/channel/UCVNwNddfe0XxxQdD5dZnb0w

Untuk memudahkan anda mendapatkan Update Video terbarunya, maka silahkan anda klik tombol SUBSCRIBE atau LANGGANAN di ke 2 channel youtube tadi GRATIS tidak dipungut biaya sepeserpun.

Jangan lupa klik tombol SUBSCRIBE nya untuk ber LANGGANAN GRATIS di ke 2 channel youtube saya ini untuk memudahkan anda mendapatkan UPDATE VIDEO TERBARU dari saya.

Saya cukupkan sekian dulu artikel dari saya yang berjudul Memasukkan Audio Ke Halaman Website Dengan HTML ini. Untuk cara-cara lainnya nanti akan saya bahas lagi di kesempatan yang lain. Saya targetkan anda mengerti dulu bagaimana cara memasukkan file audio ini kedalam website anda. Untuk melengkapi pengetahuan anda tentang cara memasukkan file multimedia lainnya kedalam website anda, maka silahkan baca juga artikel saya yang lainnya yang berjudul Cara Memasukkan Video Ke Halaman Website Dengan HTML. Selamat Praktek dan semoga bermanfaat.

Tags: #belajar html #html #kode html #membangun website #tutorial website #web design

author
Penulis: 
Saya adalah Seorang Blogger yang aktif dan konsen di bidang programming, web design, graphic design dan bisnis online. Saya juga tertarik pada bidang Parenting, Kesehatan dan informasi bermanfaat lainnya.
Cara Posting Artikel Di Website Berbasis WordPress
Cara Posting Artikel Di Website Berbasis WordPress
Pada saat yang lalu saya sudah membahas
Konfigurasi WordPress Yang Penting Untuk Diketahui
Konfigurasi WordPress Yang Penting Untuk Diketahui
Pada kesempatan yang lalu saya sudah membahas
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Bagi anda yang ingin memiliki banyak website
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Langkah pertama yang harus anda lakukan ketika
Cara Membeli Domain Dan Hosting
Cara Membeli Domain Dan Hosting
Salah satu persyaratan untuk bisa memiliki sebuah
Cara Install WordPress Di Localhost Dengan Xampp
Cara Install WordPress Di Localhost Dengan Xampp
Sebagai lanjutan dari pembelajaran membangun website, kali
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Sebelum anda memulai untuk belajar membuat website,
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Pada kesempatan yang lalu saya sudah share
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Kali ini saya akan sharing bagaimana caranya

Beri komentar "Memasukkan Audio Ke Halaman Website Dengan HTML"

Baca juga×

Top