I'm starting a project and need the ability to control the speed of an audio file playback using the timeline.
There are specific events that happen at certain times in the song, and i need the ability to scrub forward and backward on the timeline, including the audio. is this possible?
I have a mechanism to scrub through the timeline of a symbol, but i can't get it to recognize the audio track.
I use this code on the stage in a "composition ready"
var symDur = sym.getSymbol("timelinePlay").getDuration(); // Get the timeline length of timelinePlay. We'll reference this later in the code. var mySymbol = sym.getSymbol("timelinePlay"); // Get the symbol timelinePlay. We'll reference this later in the code. var scrubber = sym.$("scrubber"); // Touch this to scrub the timeline of timelinePlay var bar = sym.$("bar"); // Bar the scrubber follows sym.$("mobileHit").hide(); // Added an extra invisible div to increase the hit region for mobile (hard to grab otherwise) var dragme = false; // Set the initial dragme function to false // Detect if mobile device, and if so swap out mouse events for touch events. This is pretty much duplicated code with touch events swapped. if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { sym.$("mobileHit").show(); // Show the extra invisible div to increase the hit region for mobile (hard to grab otherwise) $(function () { scrubber.bind("touchstart", function (e) { // Enable the scrubber on touchstart e.preventDefault(); // Cancels the default action of the mobile device - used to ensure our touch events are fired dragme = true; }); scrubber.bind("touchend", function () { // Disable the scrubber on touchend e.preventDefault(); dragme = false; }); scrubber.bind("touchmove", function (e) { // Make the magic happen on touchmove if (dragme) { var touch = e.originalEvent.touches[0]; var possibleX = touch.pageX; var leftX = bar.offset().left; var rightX = (leftX + bar.width()) - scrubber.width(); var scrubWidth = rightX - leftX; // Confine the scrubber to the width of the bar if (possibleX < leftX) { possibleX = leftX; } if (possibleX > rightX) { possibleX = rightX; } scrubber.offset({ left: possibleX }); var relativeX = possibleX - leftX; var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released } }); }) } else $(function () { scrubber.mousedown(function () { // Enable the scrubber on mousedown dragme = true }) $(document).mouseup(function () { // Disable the scrubber on mouseup dragme = false }) $(document).mousemove(function (e) { // Make the magic happen on mousemove if (dragme) { var possibleX = e.pageX; var leftX = bar.offset().left; var rightX = (leftX + bar.width()) - scrubber.width(); var scrubWidth = rightX - leftX; // Confine the scrubber to the width of the bar if (possibleX < leftX) { possibleX = leftX; } if (possibleX > rightX) { possibleX = rightX; } scrubber.offset({ left: possibleX }); var relativeX = possibleX - leftX; var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released } }) })
and have an group called 'scrubber' that contains a div called 'dot' and a box called 'mobileHit.' There's a horizontal bar that's not included in the 'scrubber' div (representation of a timeline) called 'bar' on top of which the 'scrubber' sits.
the whole contraption controls a symbol called "timelinePlay"
If there's any way to get the audio included in the timeline and give me the ability to scrub through the timeline /and/ audio, (imagine manually fast forwarding and rewinding a VHS tape) that would be wonderful!!!