1 Reply Latest reply on Sep 11, 2014 9:27 AM by Potts

    how to make audio track respond to timeline

    Potts Level 1

      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!!!