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.