Cara Membuat Audio Autoplay di HTML

By Posted on

Cara Membuat Audio Autoplay di HTML – Apakah Anda ingin menambahkan elemen audio yang otomatis diputar pada situs web Anda? Memiliki audio yang autoplay bisa menjadi cara yang menarik untuk menarik perhatian pengunjung dan meningkatkan pengalaman pengguna. Dalam panduan ini, kami akan membahas langkah-langkahnya secara detail, bahkan untuk pemula sekalipun.

Dalam era digital yang semakin berkembang, menambahkan elemen interaktif seperti audio dapat membuat situs web Anda lebih menarik dan berkesan. Salah satu cara untuk mencapai hal ini adalah dengan menggunakan HTML untuk membuat audio autoplay. Dalam panduan ini, kami akan membimbing Anda melalui langkah-langkah sederhana untuk menciptakan efek audio autoplay yang mulus di halaman web Anda.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat audio autolay di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Audio Autoplay di HTML

1. Buat Folder Project Audio Autoplay

Langkah pertama dalam membuat audio autoplay adalah dengan membuat folder khusus untuk proyek ini. Ini akan membantu Anda mengatur semua file yang terkait dengan proyek dengan baik dan menjaga kerapihan struktur proyek Anda.

Baca Juga:  Cara Membuat Video Autoplay di HTML

2. Buat Folder MP3

Setelah Anda membuat folder proyek, langkah berikutnya adalah membuat folder khusus di dalamnya untuk menyimpan file audio MP3 yang akan digunakan dalam proyek. Pastikan untuk menyimpan file audio dengan nama yang deskriptif agar mudah diidentifikasi dan diakses. Download audio mp3 disini untuk diterapkan dalam proyek audio autoplay du html.

3. Buat Sebuah File audio_autoplay.html

Sekarang saatnya untuk membuat file HTML yang akan menampilkan elemen audio autoplay. Mulailah dengan membuat file baru dalam folder proyek Anda dan beri nama file tersebut sesuai keinginan Anda, misalnya “audio_autoplay.html“. Buka file tersebut dengan editor teks favorit Anda dan mulailah menambahkan kode HTML.

Berikut ini file html yang dapat Anda tambahkan untuk membuat audio autoplay di html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Autoplay Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Welcome to Our Audio Autoplay Website</h1>
        </header>
        <main>
            <audio controls autoplay>
                <source src="mp3/audio_autoplay.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </main>
        <footer>
            <p>&copy; 2024 Audio Autoplay Website</p>
        </footer>
    </div>
</body>
</html>
 

4. Buat File style.css

Untuk memberikan tampilan yang lebih menarik pada elemen audio autoplay Anda, Anda dapat membuat file CSS terpisah. Ini akan memungkinkan Anda untuk menyesuaikan tata letak dan gaya elemen audio sesuai keinginan Anda.

Baca Juga:  Cara Membuat Background Color di HTML

Berikut ini file css yang dapat Anda tambahkan untuk membuat audio autoplay di html:

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

audio {
    width: 300px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Tampilan Audio Autoplay

Di bagian ini, kami akan memberi tahu Anda cara menambahkan elemen audio autoplay ke dalam file HTML Anda dan bagaimana cara mengontrol tampilannya menggunakan CSS.

6. Simpan & Lihat Tampilan

Setelah Anda selesai menambahkan kode HTML dan CSS untuk elemen audio autoplay, simpanlah file Anda dan buka dalam browser web untuk melihat tampilannya. Pastikan bahwa audio diputar secara otomatis seperti yang diharapkan dan bahwa tampilannya sesuai dengan desain yang Anda inginkan.

Preview hasil

Berikut ini preview hasil audio autoplay di html jika Anda berhasil membuatnya:

Baca Juga:  Cara Membuat Tabel HTML dengan Colspan dan Rowspan

Penutup

Dengan mengikuti langkah-langkah sederhana ini, Anda dapat dengan mudah membuat elemen audio autoplay yang menarik untuk disertakan dalam situs web Anda. Jangan ragu untuk bereksperimen dengan kode dan gaya untuk menciptakan tampilan yang sesuai dengan kebutuhan dan preferensi desain Anda.

Related posts: