Highlighted

How to pause audio with timeline in flashcc exported Html5?

New Here ,
Jan 31, 2020

Copy link to clipboard

Copied

Hi Team,

Can anyone guide me how to pause audio with timeline in flashCC exported html5? I am working on project like interface loads multiple html pages with next,back and play/Pause butons.

To pausing timeline i am using below Method.

exportRoot.gotoAndStop(timelinePos);
But with this method audio not pausing. Could someone guide me this issue?

Thanks,
Ramu.
TOPICS
Timeline

Views

297

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to pause audio with timeline in flashcc exported Html5?

New Here ,
Jan 31, 2020

Copy link to clipboard

Copied

Hi Team,

Can anyone guide me how to pause audio with timeline in flashCC exported html5? I am working on project like interface loads multiple html pages with next,back and play/Pause butons.

To pausing timeline i am using below Method.

exportRoot.gotoAndStop(timelinePos);
But with this method audio not pausing. Could someone guide me this issue?

Thanks,
Ramu.
TOPICS
Timeline

Views

298

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 31, 2020 0
Adobe Community Professional ,
Jan 31, 2020

Copy link to clipboard

Copied

There is no official way to do this. Setting the position of a playing sound in CreateJS (the library that Canvas documents use) is actually easy. The problem is that with timeline sound, there's no way to know the internal ID of the currently playing sound.

 

However, fortunately for us, for some reason Animate uses the custom function playSound(), not part of the CreateJS API, whenever it plays a timeline sound. This makes it easy to hook into this function and add some code that saves the sound ID whenever it's called.

 

// replacement sound-playing function that stores current sound ID
window.playSoundHook = function() {
	window._curSound = _origPlaySoundFunc.apply(this, arguments);
	return _curSound;
}

// hook into original sound playback function
if (window.playSound) {
	window._origPlaySoundFunc = window.playSound;
	window.playSound = playSoundHook;
}
else {
	alert("ERROR: Adobe changed things again.");
}

 

 All the references to window. aren't strictly necessary, they're just to make it explicit that we're referencing global variables.

 

So once the above code runs, whenever a timeline sound plays the global variable _curSound gets set, that points to a CreateJS sound object. This can be used to manipulate the currently playing sound. Here are some convenience functions for this:

 

// seek currently-playing sound to requested millisecond
window.seekSound = function(ms) {
	if (_curSound) {
		_curSound.position = ms;
	}
}

// seek currently-playing sound to requested frame
// must provide frame that sound started on
window.seekSoundFrame = function(startFrame, destFrame) {
	if (_curSound) {
		_curSound.position = (destFrame - startFrame) * createjs.Ticker.interval;
	}
}

 

CreateJS has no idea which timeline a sound was started from, so if you want to seek to a frame, you have to tell it what frame the sound started on.

 

Finally, here's some demo code for theoretical forward/back buttons controlling the root timeline, using the above code.

 

this.btnBack.addEventListener("click", function() {
	var t = exportRoot.currentFrame - 25;
	if (t < 1) {
		t = 1;
	}
	exportRoot.gotoAndPlay(t);
	seekSoundFrame(1, t);
});

this.btnForward.addEventListener("click", function() {
	var t = exportRoot.currentFrame + 25;
	if (t > exportRoot.totalFrames - 1) {
		t = exportRoot.totalFrames - 1;
	}
	exportRoot.gotoAndPlay(t);
	seekSoundFrame(1, t);
});

 

That's it. Tested in all major desktop browsers and works fine, but bear in mind that mobile browser makers like to be jerks when it comes to media playback, so caveat emptor.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2020 1
Adobe Community Professional ,
Jan 31, 2020

Copy link to clipboard

Copied

Wow! Amazing!

 

I'm gonna save this for future reference.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2020 0
Adobe Community Professional ,
Jan 31, 2020

Copy link to clipboard

Copied

Oops, I forgot to answer OP's actual question, how to pause/resume a sound. With the above sound hook in place, just set the value of the paused property to true or false as desired:

 

this.btnPlayPause.addEventListener("click", function() {
	exportRoot.paused = !exportRoot.paused;
	_curSound.paused = exportRoot.paused;
});

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2020 1
Adobe Community Professional ,
Jan 31, 2020

Copy link to clipboard

Copied

Wow, really good info! Thanks Clay.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2020 1