Panduan Cara Membuat Background Music Continuous di Articulate Storyline 3 / 360

Metode ini menggunakan JavaScript untuk membuat objek audio global. Ini memungkinkan musik terus bermain meskipun pengguna berpindah slide atau scene. Tombol On/Off dapat diletakkan di slide mana saja (tidak harus di Slide Master).

Langkah 1: Persiapan Variabel Storyline

Sebelum masuk ke coding, buat variabel di dalam Storyline untuk mengontrol status visual tombol (misalnya berubah warna saat mati).

1. Buka panel Variables di Storyline.

2. Buat variabel baru:

   • Name: StatusMusik

   • Type: True/False

   • Default Value: True (Artinya musik nyala saat mulai).

Langkah 2: Kode Inisialisasi (Hanya di Slide Pertama)

Kode ini berfungsi untuk memulai musik saat kursus pertama kali dibuka.

1. Pergi ke Slide 1 (Slide pembuka).

2. Buat trigger baru: Execute JavaScript.

3. Set waktunya: When the timeline starts on this slide.

4. Masukkan kode berikut:

// --- KODE INISIALISASI ---

// Cek apakah audio sudah pernah dibuat sebelumnya agar tidak dobel saat kembali ke menu
if (window.bgAudio === undefined) {
    
    // Inisialisasi file audio
    // Catatan: 'bgmusic.mp3' adalah nama file yang nanti kita taruh di folder output
    window.bgAudio = new Audio('bgmusic.mp3');
    
    // Mengatur agar musik berulang (loop)
    window.bgAudio.loop = true;
    
    // Mengatur volume (0.0 sampai 1.0). 0.2 artinya 20%
    window.bgAudio.volume = 0.2;
    
    // Mainkan musik
    window.bgAudio.play();
}

Langkah 3: Membuat Tombol On/Off

Anda bisa membuat tombol ini di slide mana saja, atau di-copy ke setiap slide. Tombol ini tidak harus ada di Slide Master.

1. Buat tombol (Button) atau Icon (misalnya gambar Speaker).

2. Buat trigger pada tombol tersebut: Execute JavaScript.

3. Set waktunya: When user clicks.

4. Masukkan kode berikut:

// --- KODE TOMBOL TOGGLE (ON/OFF) ---

// Mengambil referensi ke Storyline Player
var player = GetPlayer();

// Cek status musik saat ini
if (window.bgAudio.paused) {
    // Jika sedang pause, mainkan
    window.bgAudio.play();
    player.SetVar("StatusMusik", true); // Ubah variabel SL jadi True
} else {
    // Jika sedang main, pause
    window.bgAudio.pause();
    player.SetVar("StatusMusik", false); // Ubah variabel SL jadi False
}

Langkah 4: Mengatur Tampilan Tombol (Opsional)

Agar tombol terlihat "Mati" atau "Nyala", tambahkan trigger standar Storyline pada tombol tersebut (tanpa coding):

1. Change state of [Tombol Musik] to Normal

   • When: Variable changes

   • Variable: StatusMusik

   • Condition: if StatusMusik is equal to True.

2. Change state of [Tombol Musik] to Disabled (atau buat state custom bernama 'Off')

   • When: Variable changes

   • Variable: StatusMusik

   • Condition: if StatusMusik is equal to False.

Tips: Pastikan saat slide dimulai (When timeline starts), Anda juga menambahkan trigger untuk mengecek variabel StatusMusik agar tampilan tombol sesuai dengan status musik yang sedang berjalan.

Langkah 5: PUBLISH dan Penempatan File MP3 (SANGAT PENTING)

JavaScript tidak akan bisa menemukan file musik di mode Preview. Anda harus melakukan Publish terlebih dahulu.

1. Publish project Storyline Anda ke format Web atau LMS.

2. Siapkan file lagu Anda (MP3). Ubah namanya menjadi bgmusic.mp3 (harus sama persis dengan nama di kode Langkah 2).

3. Buka folder hasil publish Anda.

4. Copy file bgmusic.mp3 dan Paste tepat di dalam folder hasil publish tersebut (sejajar dengan file story.html atau index.html).

   • Struktur folder:

     • story_content/

     • story.html

     • bgmusic.mp3 <--- Letakkan di sini

5. Jalankan story.html untuk mencoba.

Catatan Penting

• Browser Policy: Browser modern (Chrome/Edge) sering memblokir "Auto-play Audio". Jika musik tidak menyala otomatis di awal, user harus melakukan interaksi (klik) minimal sekali di slide pertama agar browser mengizinkan audio berjalan.

• Format: Gunakan format .mp3 standar.

Baca Juga