Play/stop sound in adobe animate html5 canvas document

[harisahmed]

Hello,

I wanted to know if there is any way to make this AS3 code work in HTML5 document?

button_1.addEventListener(MouseEvent.CLICK, fl_ClickToPlayStopSound_3);

var fl_SC_3:SoundChannel;

var fl_ToPlay_3:Boolean = true;

function fl_ClickToPlayStopSound_3(evt:MouseEvent):void
{
if(fl_ToPlay_3)
{
var s:Sound = new Sound(new URLRequest("http://www.helpexamples.com/flash/sound/song1.mp3"));
fl_SC_3 = s.play();
}
else
{
fl_SC_3.stop();
}
fl_ToPlay_3 = !fl_ToPlay_3;
}

[kglad]

createjs.Sound.registerSound("http://www.helpexamples.com/flash/sound/song1.mp3", "soundID");

this.button_1.addEventListener('click',toggleF.bind(this));

if(!this.playing_defined){

this.playing=false;

this.playing_defined=true;

}

function toggleF(){

if(this.playing){

stopF();

} else {

playF();

}

this.playing=!this.playing;

}

}

function playF(){
createjs.Sound.play("soundID");

}

function stopF(){
createjs.Sound.stop("soundID");
}

[harisahmed]

Thanks for the help but as I am not good with coding, I don't know what is the issue there, as its not playing sound. Can you help in this?

https://1drv.ms/u/s!AteMvMBtvCb1gVBfhIZ9lmfJRSnx?e=tpOBPH

Another thing I wanted to ask if i want to link the button from a sound in the library, how it can be done?

[kglad]

i charge for downloading and fixing files.  free help i only offer via the adobe forums.

if you want me to download your file, fix it and encode the playing of a library sounds, send me a private message.

[harisahmed]

oh ok .. 

If you can help here,

I used the above code you given

createjs.Sound.registerSound("http://www.helpexamples.com/flash/sound/song1.mp3", "soundID");

this.button_1.addEventListener('click',toggleF.bind(this));

if(!this.playing_defined){

this.playing=false;

this.playing_defined=true;

}

function toggleF(){

if(this.playing){

stopF();

} else {

playF();

}

this.playing=!this.playing;

}

function playF(){
createjs.Sound.play("soundID");

}

function stopF(){
createjs.Sound.stop("soundID");
}

and it is giving me this error when i export it and press the button.

onMessage extension
ial.js:450 Clean the cache of the scraper (new onComplete event)
:8090/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Test.html:1 Access to XMLHttpRequest at 'http://www.helpexamples.com/flash/sound/song1.mp3' from origin 'http://127.0.0.1:8090' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
www.helpexamples.com/flash/sound/song1.mp3:1 Failed to load resource: net::ERR_FAILED

[kglad]

there are various work-arounds to deal with the cors error, but the easiest, is just download that mp3 and use a local path to it.  and browsers are going to block, what appears to be sound playing on load, so use:

this.button_1.addEventListener('click',toggleF.bind(this));

if(!this.playing_defined){

this.playing=false;

this.playing_defined=true;

}

function toggleF(){

if(!this.sound_loaded){

createjs.Sound.registerSound("./song1.mp3", "soundID");  // if song1.mp3 is in same directory with html

this.sound_loaded=true;

}

if(this.playing){

stopF();

} else {

playF();

}

this.playing=!this.playing;

}

function playF(){
createjs.Sound.play("soundID");

}

function stopF(){
createjs.Sound.stop("soundID");
}

[kglad]

after posting that i was concerned there'd be a timing issue (trying to play something that wasn't fully loaded) that i'd hoped to by-pass by the first code snippet. testing showed that was a problem.  so, use:

this.button_1.addEventListener('click', toggleF.bind(this));

if (!this.playing_defined) {
this.playing = false;
this.playing_defined = true;
}

function toggleF() {
if (!this.sound_loaded) {
createjs.Sound.registerSound("./song1.mp3", "soundID"); // if song1.mp3 is in same directory with html
setTimeout(playF, 1000);
this.sound_loaded = true;
} else {
if (this.playing) {
stopF();
} else {
playF();
}
}
this.playing = !this.playing;
}

function playF() {
createjs.Sound.play("soundID");
}

function stopF() {
createjs.Sound.stop("soundID");
}

[harisahmed]

This is working best .. Thanks a million .. but when I am placing 2 sounds at same place but different name and placing 2 separate buttons, they both are playing same sound. i changed the instance name and replaced the sound name in both scripts.

Even if i don't get stopping functionality, but how i would be able to play different sounds by just clicking the button and no need to stop when i click again, it can replay?

[kglad]

use different soundID's for the different sounds.  you can then control the various sounds independent of each other.

[harisahmed]

Thanks a lot ... please can you specify which parts of the scripts needs to be changed?

[kglad]

createjs.Sound.registerSound("./song1.mp3", "soundID");

createjs.Sound.play("soundID");

createjs.Sound.stop("soundID");

to make it easier for you, you can use:

function registerSoundF(s){

createjs.Sound.registerSound(s,s);

}

function playSoundF(s){

createjs.Sound.play(s);

}

function stopSoundF(s){

createjs.Sound.stop(s);

}

you can then use:

registerSoundF("./...whatever path/whatever file name");  // to register a sound (after user interaction)

playSoundF("./...whatever path/whatever file name"); //  to play that sound

stopSoundF("./...whatever path/whatever file name");  // to stop that sound

if those paths/names are too cumbersome, you can use a data object to simplify things, but that would increase the chances of you making an error.

[harisahmed]

I am using these 2 scripts on 2 different buttons, I dont understand why it is playing same sound on both buttons

this.button_a.addEventListener('click', toggleF.bind(this));

if (!this.playing_defined) {
this.playing = false;
this.playing_defined = true;
}

function toggleF() {
if (!this.sound_loaded) {
createjs.Sound.registerSound("song1.mp3", "q");
setTimeout(playF, 1000);
this.sound_loaded = true;
} else {
if (this.playing) {
stopF();
} else {
playF();
}
}
this.playing = !this.playing;
}

function playF() {
createjs.Sound.play("song1.mp3", "q");
}

function stopF() {
createjs.Sound.stop("song1.mp3", "q");
}

this.button_b.addEventListener('click', toggleF.bind(this));

if (!this.playing_defined) {
this.playing = false;
this.playing_defined = true;
}

function toggleF() {
if (!this.sound_loaded) {
createjs.Sound.registerSound("para2.mp3", "s");
setTimeout(playF, 1000);
this.sound_loaded = true;
} else {
if (this.playing) {
stopF();
} else {
playF();
}
}
this.playing = !this.playing;
}

function playF() {
createjs.Sound.play("para2.mp3", "s");
}

function stopF() {
createjs.Sound.stop("para2.mp3", "s");
}

[kglad]

you have duplicate playF and stopF functions causing the problem and you have, at least, two other errors.  use the code i suggested.

function registerSoundF(s){

createjs.Sound.registerSound(s,s);

}

function playSoundF(s){

createjs.Sound.play(s);

}

function stopSoundF(s){

createjs.Sound.stop(s);

}

[harisahmed]

Sorry for bring you again on this ... if you can simply and complete this code for me ..

function registerSoundF(s){

createjs.Sound.registerSound(s,s);

}

function playSoundF(s){

createjs.Sound.play(s);

}

function stopSoundF(s){

createjs.Sound.stop(s);

}

If my button instance name is button_1 ,
sound path is"audio/soung1.mp3" and
soundID is "a" ...
what will be the complete code. 

I am unable to use it correctly 

[kglad · Accepted solution]

createjs.Sound.registerSound("./audio/soung1.mp3", "soung1ID");

this.button_1.addEventListener('click',toggleF.bind(this));

if(!this.playing_defined){

this.playing=false;

this.playing_defined=true;

}

function toggleF(){

if(this.playing){

stopF();

} else {

playF();

}

this.playing=!this.playing;

}

}

function playF(){
createjs.Sound.play("soung1ID");

}

function stopF(){
createjs.Sound.stop("soung1ID");
}

[harisahmed]

Thank you so much! ... worked best!

[kglad]

you're welcome.