"Belajar Bikin Gambar & VIDEO AI dari NOL! GABUNG SEKARANG!
Beranda
Articulate Storyline 3
Info Pendidikan

Tutorial Cara Membuat Music Autoplay Looping dengan JavaScript di Articulate Storyline

Pernah ingin membuat musik otomatis diputar saat slide Articulate Storyline dibuka, tetapi bingung karena fitur autoplay sering dibatasi oleh browser?

Tenang, ada solusinya. Dengan memanfaatkan JavaScript, kita bisa membuat audio berjalan secara otomatis dan mengontrol pemutarannya sesuai kebutuhan dalam proyek Articulate Storyline.

Pada artikel ini, kita akan membahas cara membuat auto play music dengan JavaScript di Articulate Storyline secara praktis, mulai dari konsepnya, penempatan audio, hingga penerapan script agar musik dapat berjalan ketika slide dijalankan.

JavaScript yang bisa Anda gunakan di Articulate Storyline untuk memutar file music.mp3 secara otomatis.

Kode ini juga memastikan bahwa jika pengguna berpindah slide, musik tidak akan menumpuk (terputar ganda).

Kode JavaScript

Salin kode di bawah ini ke dalam trigger Execute JavaScript di Storyline:

JavaScript
// Mengecek apakah elemen audio sudah ada agar tidak ganda
var bgAudio = document.getElementById('bgMusic');

if (!bgAudio) {
    // Membuat elemen audio baru jika belum ada
    bgAudio = document.createElement('audio');
    bgAudio.id = 'bgMusic';
    bgAudio.src = 'music.mp3'; 
    bgAudio.loop = true; // Ubah menjadi false jika tidak ingin musik diulang terus-menerus
    document.body.appendChild(bgAudio);
}

// Memutar musik
bgAudio.play().catch(function(error) {
    console.log("Autoplay diblokir oleh browser. Butuh interaksi klik dari user.", error);
});

Cara Memasukkan ke Storyline

  1. Buka slide tempat Anda ingin musik mulai berbunyi.

  2. Buat trigger baru di panel Triggers.

  3. Atur parameternya sebagai berikut:

    • Action: Execute JavaScript

    • Script: (Klik tombol ... dan paste kode di atas)

    • When: Timeline starts

    • Object: This slide

  4. Klik OK untuk menyimpan.

Penting: Penempatan File music.mp3

Articulate Storyline tidak secara otomatis memasukkan file eksternal yang dipanggil via JavaScript ke dalam folder hasil publish. Anda harus memasukkannya secara manual:

  1. Lakukan Publish project Storyline Anda (ke Web, LMS, atau format lainnya).

  2. Buka folder hasil publish tersebut (biasanya ada folder story_content, html5, file story.html, dll).

  3. Copy dan Paste file music.mp3 Anda tepat di luar folder tersebut (sejajar dengan file story.html atau index_lms.html).

Catatan Autoplay Browser: Browser modern (seperti Chrome atau Safari) memiliki kebijakan keamanan yang ketat. Musik tidak bisa autoplay jika pengguna belum melakukan interaksi (klik/tap) di layar.

Solusi terbaik: Pasang kode ini pada slide ke-2, dan buatlah slide ke-1 sebagai "Cover Halaman" yang memiliki tombol "Mulai" (Start). Ketika pengguna mengklik "Mulai" untuk masuk ke slide 2, browser akan mengizinkan musik untuk diputar secara otomatis.


Cara membuat tombol on/off (play/pause) untuk musik latar belakang di Articulate Storyline menggunakan JavaScript?

Karena pada langkah sebelumnya kita sudah memberikan ID bgMusic pada elemen audio, kita bisa dengan mudah mengontrol (play/pause) musik tersebut menggunakan JavaScript yang dipicu oleh tombol di Storyline.

Berikut adalah langkah-langkah untuk membuat tombol on/off musik:

1. Buat Tombol di Storyline

  1. Buka slide tempat Anda ingin meletakkan tombol.
  2. Masukkan sebuah tombol, gambar, atau ikon (misalnya ikon speaker).
  3. Anda bisa mengatur States pada tombol tersebut (misalnya Normal untuk ikon suara menyala, dan Selected untuk ikon suara dicoret) agar terlihat lebih interaktif.

2. Tambahkan Trigger JavaScript

Buat trigger baru pada tombol tersebut dengan pengaturan berikut:

  • Action: Execute JavaScript
  • Script: (Copy-paste kode di bawah ini)
  • When: User clicks
  • Object: (Pilih tombol atau ikon yang baru Anda buat)

Kode JavaScript untuk Toggle Play/Pause:

JavaScript
// Mengambil elemen audio yang sudah dibuat sebelumnya
var bgAudio = document.getElementById('bgMusic');

if (bgAudio) {
    // Mengecek apakah musik sedang berhenti (paused)
    if (bgAudio.paused) {
        bgAudio.play(); // Jika berhenti, maka putar
    } else {
        bgAudio.pause(); // Jika memutar, maka hentikan
    }
} else {
    console.log("Musik belum dimuat di slide ini.");
}
Tips Tambahan untuk Visual Tombol:
Jika Anda menggunakan tombol bawaan Storyline dan ingin mengubah tampilannya secara otomatis (berubah antara ikon Play dan Pause), Anda bisa menambahkan satu trigger lagi pada tombol tersebut:

  • Action: Change state of
  • On Object: (Pilih tombol Anda)
  • To state: Selected
  • When: User clicks

Pastikan Anda sudah membuat state "Selected" pada tombol tersebut yang berisi gambar/ikon musik mati (Mute). Dengan begitu, saat di-klik, fungsi JavaScript akan berjalan untuk mematikan suara, dan tombol Storyline akan berubah secara visual.

Cara mengatur volume musik agar tidak terlalu keras?

Untuk mengatur volume musik menggunakan JavaScript, kita akan menggunakan properti .volume pada elemen audio HTML5. Nilai volume ini berkisar antara 0.0 (senyap/mute) hingga 1.0 (volume maksimal/100%).

Ada dua cara umum untuk menerapkan ini di Articulate Storyline: menetapkan volume default sejak awal, atau membuat Slider agar pengguna bisa mengatur volumenya sendiri.

1. Mengatur Volume Default Saat Musik Dimulai

Jika Anda merasa musiknya terlalu keras dan hanya ingin menurunkannya sejak awal, Anda cukup menambahkan satu baris kode ke dalam script Timeline starts yang kita buat di awal tadi.

Ubah script autoplay Anda menjadi seperti ini (perhatikan baris bgAudio.volume):

JavaScript
var bgAudio = document.getElementById('bgMusic');

if (!bgAudio) {
    bgAudio = document.createElement('audio');
    bgAudio.id = 'bgMusic';
    bgAudio.src = 'music.mp3'; 
    bgAudio.loop = true;
    bgAudio.volume = 0.3; // Mengatur volume ke 30% (Ubah angka ini dari 0.1 hingga 1.0)
    document.body.appendChild(bgAudio);
}

bgAudio.play().catch(function(error) {
    console.log("Autoplay diblokir", error);
});

2. Membuat Slider Pengatur Volume (Interaktif)

Jika Anda ingin memberikan kontrol kepada pengguna untuk membesarkan atau mengecilkan suara, Anda bisa menggunakan fitur Slider bawaan Storyline.

Langkah-langkah:

  1. Buat Slider di Storyline: Buka menu Insert > Slider dan gambar slider di slide Anda.

  2. Atur Properti Slider:
    • Di tab Slider Tools > Design, atur Start ke 0, End ke 100, dan Initial ke 50 (atau sesuai keinginan).
    • Perhatikan nama variabel slider tersebut (biasanya otomatis bernama Slider1).

  3. Buat Trigger JavaScript:
    Tambahkan trigger pada slider tersebut dengan pengaturan:
    • Action: Execute JavaScript
    • Script: (Copy-paste kode di bawah ini)
    • When: Slider moves
    • Slider: Slider1 (atau nama slider Anda)

Kode JavaScript untuk Slider:

JavaScript
// Mengambil player Storyline untuk membaca variabel
var player = GetPlayer();

// Mengambil nilai dari Slider (0 sampai 100)
// Pastikan nama "Slider1" sesuai dengan nama variabel slider di Storyline Anda
var sliderValue = player.GetVar("Slider1"); 

var bgAudio = document.getElementById('bgMusic');

if (bgAudio) {
    // JavaScript membutuhkan nilai 0.0 hingga 1.0
    // Jadi kita bagi nilai slider (0-100) dengan 100
    bgAudio.volume = sliderValue / 100;
}
Dengan cara ini, setiap kali pengguna menggeser slider, volume musik akan otomatis membesar atau mengecil sesuai posisi slider.

====================

Cara mematikan background music yang dibuat dengan JavaScript saat masuk ke slide kuis di Articulate Storyline?


Untuk mematikan musik latar secara otomatis saat pengguna masuk ke slide tertentu (misalnya slide kuis atau video), Anda hanya perlu menambahkan trigger JavaScript sederhana di slide tersebut.

Berikut adalah langkah-langkahnya:

Langkah-langkah di Storyline:

  1. Buka slide kuis (atau slide mana pun di mana Anda ingin musiknya berhenti).
  2. Buat trigger baru di panel Triggers.
  3. Atur parameternya sebagai berikut:
    • Action: Execute JavaScript
    • Script: (Copy-paste kode di bawah ini)
    • When: Timeline starts
    • Object: This slide

Kode JavaScript untuk Mematikan Musik:

JavaScript
var bgAudio = document.getElementById('bgMusic');

// Mengecek apakah elemen musik ada
if (bgAudio) {
    bgAudio.pause(); // Menghentikan musik
    
    // (Opsional) Hapus tanda "//" pada baris di bawah ini jika Anda ingin 
    // musik kembali ke durasi 0 (awal) saat nanti diputar lagi
    // bgAudio.currentTime = 0; 
}

Bagaimana jika ingin musik menyala kembali setelah kuis selesai?

Jika setelah slide kuis (misalnya di slide Result atau Summary), Anda ingin musik tersebut otomatis memutar kembali, Anda cukup menambahkan trigger Execute JavaScript di slide tersebut saat Timeline starts dengan kode berikut:

JavaScript
var bgAudio = document.getElementById('bgMusic');

if (bgAudio) {
    bgAudio.play().catch(function(error) {
        console.log("Gagal memutar kembali", error);
    });
}
Dengan metode ini, Anda memiliki kendali penuh di slide mana saja musik harus menyala (play) dan di slide mana saja musik harus diam (pause).
Baca Juga
Selanjutnya kalian mau dibuatkan artikel tentang apa? Tulis dikolom komentar ya!!!

Posting Komentar