How to pause audio with timeline in flashcc exported Html5?

Report · Jan 31, 2020

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.

Report · Jan 31, 2020

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.

Report · Jan 31, 2020

Wow! Amazing!

I'm gonna save this for future reference.

Report · Jan 31, 2020

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;
});

Report · Jan 31, 2020

Wow, really good info! Thanks Clay.