Home Archives for 04/30/16

Tutorial HTML Part 18 : Membuat audio dengan html5

21:57:00 |
Selamat hari minggu sobat, mungkin kalian di hari minggu ini pada santai di rumah dan bermain komputer di dalam kamar, itu merupakan hal yang enak tetapi di hari minggu ini saya harus datang ke warnet untuk membuat sebuah tutorial mengenai Membuat audio dengan html5 (Karena saya tidak punya komputer di rumah).Mungkin dari kalian ada yang sudah pernah mendengar lagu pada sebuah website, contohnya adalah soundcloud, ya soundcloud siapa sih yang tidak tahu dengan soundcloud sebuah website pemutar lagu.Nah, untuk kita yang mau buat website lagu, kita harus membuat audio dengan html5, cara nya cukup mudah kok, langsung saja ya.

Membuat Audio dengan html5

Dalam pembuatan audio sangatlah mudah, karena kita hanya menggunakan tag <audio>.Oke, tidak usah banyak basa-basi langsung saja ketik script dibawah ini pada text editor anda.

<!DOCTYPE html>
<html>
<head>
 <title>Membuat audio dengan html5</title>
</head>
<body>
   <audio src="namalagu.mp3" controls></audio>
</body>
</html>

Coba perhatikan pada script di atas, kita menggunakan tag <audio>, sedangkan src fungsinya adalah untuk memangil nama file lagu, dan untuk controls adalah untuk mengontrol mulai/berhentinya sebuah lagu.

Jika kita melihat script di atas kita hanya menempatkan lagu di dalam folder yang sama pada file html.Lalu bagaimana jika file html dan lagu itu berbedah folder, misalkan file html ada di folder HTML, dan lagu ada di folder LAGU.Penulisan script seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
 <title>Membuat audio dengan html5</title>
</head>
<body>
   <audio src="namafolder/namalagu.mp3" controls></audio>
</body>
</html>

masih bingung? silahkan lihat pada gambar di bawah ini.
Tutorial HTML : Membuat audio dengan html5
Gimana sudah mengertikan? silahkan lihat dulu demo nya di bawah ini.
Selamat menikmati lagu yang anda dengar, dan mudah-mudahan tutorial ini bisa bermanfaat untuk anda semua, mohon maaf jika ada kata-kata yang menyinggung, sekian terima kasih.
Subscribe to: Posts (Atom)