Panduan Lengkap: Membuat Background Music (BGM) di Articulate Storyline 3 dengan JavaScript

Salah satu tantangan terbesar di Articulate Storyline adalah membuat musik latar (background music) yang berjalan terus-menerus tanpa terputus atau restart setiap kali pengguna berpindah slide. Fitur audio bawaan Storyline biasanya terikat pada timeline per slide.

Panduan ini akan memberikan solusi menggunakan JavaScript dan HTML5 Audio Object. Solusi ini memungkinkan musik berjalan independen di latar belakang, lengkap dengan tombol On/Off yang ikonnya berubah otomatis.

Persiapan Awal

Sebelum masuk ke Storyline, siapkan aset berikut:

1. File Audio: Siapkan file musik format .mp3.

2. Penamaan: Ubah nama file menjadi sederhana dan huruf kecil semua, misalnya: bgm.mp3.

3. Lokasi: Simpan file ini di tempat yang mudah dijangkau (nanti akan kita salin ke folder hasil publish).

Langkah 1: Membuat Variabel Pengontrol

Kita membutuhkan variabel untuk "berbicara" antara kode JavaScript dan antarmuka Storyline (tombol).

1. Buka panel Variables (klik ikon (x) di panel Triggers).

2. Buat variabel baru:

   • Name: statusMusik

   • Type: True/False

   • Default Value: True

     (Artinya: Secara default, musik dianggap menyala).

Langkah 2: Memasang "Mesin" Audio (Slide Master)

Agar musik dimuat sekali dan terus berjalan di seluruh project, kita meletakkan kodenya di Slide Master.

1. Masuk ke menu View > Slide Master.

2. Pilih Slide Master Induk (slide paling atas yang ukurannya paling besar).

3. Buat Trigger baru:

   • Action: Execute JavaScript.

   • When: Timeline starts.

   • Object: This Slide.

4. Klik tombol ... (Script) dan masukkan kode berikut:

JavaScript

// Mengecek apakah audio sudah pernah dimuat agar tidak double
if (window.bgmAudio === undefined) {
    // Memuat file audio eksternal
    window.bgmAudio = new Audio('bgm.mp3');
    
    // Setting Loop (berulang) dan Volume (0.1 - 1.0)
    window.bgmAudio.loop = true;
    window.bgmAudio.volume = 0.5; 
    
    // Memainkan musik
    var promise = window.bgmAudio.play();
    
    // Penanganan kebijakan Autoplay Browser
    if (promise !== undefined) {
        promise.then(_ => {
            // Autoplay diizinkan
        }).catch(error => {
            // Autoplay diblokir browser, menunggu interaksi user
        });
    }
}

5. Klik OK. Tutup tampilan Slide Master.

Langkah 3: Membuat Tombol On/Off dengan Visual Feedback

Kita akan membuat satu tombol yang berfungsi ganda: mematikan/menyalakan musik DAN berubah ikonnya (Speaker/Silang).

A. Mengatur Tampilan (States)

1. Insert sebuah tombol atau ikon speaker di slide.

2. Pilih tombol tersebut, lalu buka tab States di bagian bawah.

3. Pastikan state Normal bergambar Speaker Menyala.

4. Buat state baru bernama Mute.

5. Pada state Mute, ganti gambarnya menjadi ikon Speaker Mati/Silang.

B. Menambahkan Logika Tombol (JavaScript)

Buat trigger pada tombol tersebut:

• Action: Execute JavaScript.

• When: User clicks.

• Script:

JavaScript

var player = GetPlayer();
var status = player.GetVar("statusMusik");

if (status == true) {
    // Matikan musik & update variabel ke False
    window.bgmAudio.pause();
    player.SetVar("statusMusik", false);
} else {
    // Nyalakan musik & update variabel ke True
    window.bgmAudio.play();
    player.SetVar("statusMusik", true);
}

C. Menambahkan Logika Perubahan Ikon (Triggers)

Agar ikon berubah mengikuti status musik, tambahkan 2 trigger pada tombol yang sama:

Trigger Ubah ke Mute:

• Action: Change state of [Tombol Musik] to Mute.

• When: Variable changes -> statusMusik.

• Condition: if statusMusik == Equal to False.

Trigger Ubah ke Normal:

• Action: Change state of [Tombol Musik] to Normal.

• When: Variable changes -> statusMusik.

• Condition: if statusMusik == Equal to True.

Langkah 4: Publikasi (Sangat Penting!)

Karena kita memanggil file bgm.mp3 secara eksternal melalui kode, Storyline tidak akan mem-package file tersebut secara otomatis.

1. Publish project Anda (ke Web atau LMS).

2. Buka folder hasil publish di komputer Anda.

3. Copy file bgm.mp3 yang sudah disiapkan di awal.

4. Paste file tersebut ke dalam folder hasil publish (sejajar dengan file story.html atau index.html).

Catatan Penting: Kebijakan Autoplay Browser

Browser modern (Chrome, Edge, Firefox) sering memblokir suara yang berbunyi otomatis tanpa interaksi pengguna.

• Jika saat dibuka pertama kali musik tidak bunyi, itu normal.

• Musik akan otomatis mulai segera setelah pengguna melakukan klik pertama di mana saja pada layar (misalnya tombol "Start" atau "Next").

Selamat berkarya! Dengan metode ini, media pembelajaran interaktif Anda akan terasa lebih profesional dengan musik latar yang seamless.

Baca Juga