Menambahkan Audio Backsound dengan JavaScript dan Web Object pada Articulate Storyline 3

pada tanggal
Articulate Storyline 3 memberikan fleksibilitas untuk menyesuaikan interaktivitas dengan maksimal dengan upaya minimal. Alat authoring berbasis web ini memberikan kelayakan untuk menambahkan JavaScript yang dapat sangat membantu untuk membawa kursus eLearning kita ke tingkat berikutnya. Cukup mudah untuk memperluas dan meningkatkan fungsionalitas fitur bawaan di Storyline yang datang secara default. Salah satunya adalah untuk menambahkan audio backsound, dimana pada Articulate Storyline 3 tidak tersedia fitur untuk kebutuhan tersebut. Pada posting sebelumnya (baca disini) kita sudah dapat menambhakan audio backsound pada Articulate Storyline 3 dengan cara mengedit file story.html dan story_html5.html pada root folder output, yang tentunya cara ini mudah namun kurang praktis (menurut saya😉). Nah pada posting kali ini saya akan berbagi bagaimana menambahkan audio backsound dengan menggunakan WebObject dan JavaScript sehingga kita tidak perlu mengedit tag html pada root folder outpot. Simak panduannya berikut ini dengan baik yaa...😃 

A. Membuat Folder Audioback_File
Yang anda lakukan pertamakali adalah membuat satu folder di drive C: namakan saja "Audioback_File" yang berisi file audio backsound dan file index.html yang tidak ada datanya (empty index.html). File index.html dapat anda buat pada teks editor misalnya notepad++, caranya sebagai berikut :
1. Buka Notepad++
2. Pilih File kemudian New
3. Save as dengan nama "index.html" dan save as typenya pilih "All Types (*.*)
4. Klik save
Seperti pada gambar berikut ini 


B. Membuat WebObject
Buka Articulate Storyline 3, pada slide pertama dalam project yang kita buat tambahkan WebObject dengan cara sebagai berikut :
1. Klik insert, pilih webobject
2. Browse folder "Audioback_File" yang telah berisi file audio backsound dan file empty index.html
3. Pastikan "Display in Slide" dan "Load web object automatically" dalam tanda aktif (dipilih)
4. Klik "Ok"



C. Menambahkan Trigger JavaSrcipt
1. Klik "Create a new trigger"
2. Pilih Action " Execute JavaScript"
3. Klik Script dan copas code JavaSript berikut ini  :

//load the scripts dynamically into the head of the document
function add_line() {
    var line = document.createElement("audio");
    var head=document.getElementsByTagName('body')[0];
    line.type = "audio/mp3";
    line.src="";
    line.id="bgSong" ;
line.autoplay = true;
line.loop = true;
    head.appendChild(line);
}

 //but we only want to add these once!
if(document.getElementById('bgSong')==null){
add_line();
var audio = document.getElementById('bgSong');
audio.volume = 1.0;
}

 var player = GetPlayer();
this.Location= player.GetVar("location");

 var audio = document.getElementById('bgSong');
audio.src=Location + "NAME OF SONG HERE.mp3";
audio.load();
audio.play();

Atau Klik disini JavaScript Audio Backsound tersebut diatas.    
(Catatan, gantilah nama "NAME OF SONG HERE" dengan nama file audio backsound anda, misalnya audioback.mp3)

4. Klik When dan pilih "Timeline Start" 
5. Klik Object pada "SLIDE PERTAMA" kemudian klik Ok
D. Mendapatkan ID WebObject
Untuk mendapatkan ID WebObject maka Publishlha media anda dan lihat ID WebObject pada folder "output story_content/WebObject/ID WebObject/
Contohnya "output story_content/WebObject/5r0WIYCvs7I/
Maka ID WebObject adalah "5r0WIYCvs7I"



E. Menambahkan Variabel Location
1. Klik "Manage Project Variable" seperti gambar berikut ini :


2. Klik tanda plus
3. Lengkapi data Variabel seperti gambar berikut :

  • Beri nama variabel : location
  • Beri nama Type variabel : Text
  • Pada default value lengkapi dengan teks "story_content/WebObjects/IDWebObjects/" seperti pada contoh gambar dibawah ini, misal dengan ID WebObjects : 5r0WIYCvs7


4. Pada default value pastikan dengan mengisi "ID WebObjects" dengan benar seperti gb di atas (5r0WIYCvs7I)


F. Edit Folder WebObject
Catat ID WebObject tersebut, kemudian edit folder WebObject yang sudah dibuat dengan menambahkan satu folder dengan nama file sama dengan ID WebObject, kemudian file audio backsound dan emtpy index.html pindahkan pada folder ID WebObject tersebut. Sehingga url WebObject nya menjadi "Audioback_File/ID WebObject/

G. Edit WebObject pada Articulate Storyline
1. Klik kanan WebObject pada Slide pertama kemudian pilih edit
2. Browse URL WebObject baru, dimana file audio backsound dan empty index.html sudah berada pada folder ID WebObject baru, sehingga dalam contoh ini URL WebObjectnya menjadi "C:/Audioback/5r0WIYCvs7"
3. Klik "Ok"

H. Publish Project Articulate Storyline
Publish Project Articulate Storyline, baik dalam format WEB (html5, html5/flash, flash/html5, flash) ataupun dalam format EXE (CD), maka audio backsound akan running kontinue pada semua slide dalam project yang anda buat.

Selamat mencoba....😄


Sumber :










Komentar

Posting Komentar