Adobe Edge Audio


Adobe Edge Audio (Sound)

Step 1: Create new file in adobe edge.
Step 2: Configure the width ,height and other proprties like ID, Color etc..
Step 3: Create button for play and pause the audio. The button name is playbtn.(use rectangle,rounded rectangle to create button). Using this button text We will do this play/pause actions.
Step 4: Click on the “Open Timeline Actions”  from Timeline Panel  and Select the Play actions from list
Step 5: Write the following code in play action. Using this souce code we can send request to load audio

if(currenttime==-1){
var esound=new Audio();
esound.src="sound/birdsound.ogg";
var esound1=new Audio();
esound1.src="sound/birdsound.mp3";

sym.setVariable("audioObj", esound);
sym.setVariable("audioObj1", esound1);

$(esound).bind("ended",function(){
sym.$('Text').html("Audio Completed..");
var playtxt=sym.getSymbol('playbtn').$('Text').html("Play");
}); 

$(esound1).bind("ended",function(){
sym.$('Text').html("Audio Completed..");
var playtxt=sym.getSymbol('playbtn').$('Text').html("Play");
}); 
}

Note : In this souce code Audio class help us to load the audio. Here I triggered ended function When audio playing completed

Step 6: Now Select the play button and then select Open Actions from Timeline Panel
Step 7: To play the audio write the following code in Click actions of “playbtn” button

var playtxt=sym.getSymbol('playbtn').$('btnvalue').html();
var audioObj = sym.getVariable("audioObj");
var audioObj1 = sym.getVariable("audioObj1");
if(playtxt=='Play'){
audioObj.play();
audioObj1.play();
var playtxt=sym.getSymbol('playbtn').$('btnvalue').html("Pause");
sym.$('Text').html("Audio Playing..");
}
else{
var playtxt=sym.getSymbol('playbtn').$('btnvalue').html("Play");
sym.$('Text').html("Audio Paused..");
audioObj.pause();
audioObj1.pause();
}

Step 8: Now You can play and pause the audio

Adobe Edge Audio Volume Control

Now we will control the volume of audio in adobe edge
Step 1: Create two symbol using rectangle, text and set the name for symbol as “volplus”,”volminus”
Step 2: Already audio play/pause code is available in “Open Timeline Actions”. After added the volume control lines in “Open Timeline Actions”,

var currenttime=sym.getPosition();
if(currenttime==-1){
var esound=new Audio();
esound.src="sound/birdsound.ogg";
var esound1=new Audio();
esound1.src="sound/birdsound.mp3";
this.getSymbol("volplus").stop(0);
this.getSymbol("volminus").stop(0);
esound.volume=0.1;
sym.setVariable("audioObj", esound);
sym.setVariable("audioObj1", esound1);
$(esound).bind("ended",function(){
console.log("ended");
sym.$('Text').html("Audio Completed..");
var playtxt=sym.getSymbol('playbtn').$('Text').html("Play");
 }); 
}

Step 3: Select “volplus” (+) button and choose the “Click” action and write the following code to increase the volume of audio

var adobesound = sym.getVariable("audioObj");
var adobesound1 = sym.getVariable("audioObj1");
if(adobesound.volume<0.9 || adobesound1.volume<0.9){
  adobesound.volume+=0.1;
adobesound1.volume+=0.1;
}else{
adobesound.volume=1;
adobesound1.volume=1;
};

Step 4: Select “volminus” (-) button and choose “Click” action and write the following code to decrease the volume of audio

var adobesound = sym.getVariable("audioObj");
var adobesound1 = sym.getVariable("audioObj1");
if(adobesound.volume>0.1 || adobesound1.volume>0.1){
adobesound.volume-=0.1;
adobesound1.volume-=0.1;
}else{
adobesound.volume=0;
adobesound1.volume=0;
};

Now your audio clip will work with sound control.

Leave a Reply

Your email address will not be published. Required fields are marked *