Sound playing twice

[cfx 12 Likes (Newbie)]

Guys,

 

simple codepen example (ignore the graphics I've just dumped stuff down) trying to work out why the sound isn't playing first time on play back but on playing again (or using loop in GSDEV player) its playing twice on the time line?

 

Grateful for a steer here.

 

Buzz

See the Pen 294dd3c1897b78582e8c632231a31229?editors=0110 by cfx (@cfx) on CodePen

[Carl 9,066 Likes (Superhero)]

I"m guessing the audio might not be loading the first time you play.

I also think its probably better to create the audio object once and then just play() it on each replay of the timeline.

In other words there is no need to create a new audio object using the same mp3 every time.

when you do that, you don't get the double playback

 

here is the code

 

GSDevTools.create();

var audio = new Audio ();
  audio.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1672622/badgeDraw_short.mp3";
  audio.loop = false;
  audio.play();

function initAudioPlayer () {
  audio.play()
}

//Draw the badge
function drawBadge (){
    TweenLite.set("#coreBadge", {visibility:"visible"});
    //Splash screen animation//
    var tl = new TimelineMax();
    tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 })  
    tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"});
    return tl;
}

//Control the Hud display with live typing//
function runText (textLine) {
  TweenLite.set(textLine, {visibility:"visible"});
  var mySplitText = new SplitText(textLine, { type: "chars" }),
  tl = new TimelineMax();
  tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04)
  return tl;
  
}

var masterTL = new TimelineMax();
masterTL.add(drawBadge(), 0)
.call(initAudioPlayer, 0)
.add(runText("#hudGenius"), 1.35)

//End code
 

 

please don't post private pens. we can't fork them

 

[cfx 12 Likes (Newbie)]

Thanks, Carl - lightning speed reply!

 

My apologies about the pen, I forked it off a private pen and forgot to make it public, I've changed that now.

 

Thanks for the fix too, looking at it I can see this is right. I'll test it out and post back but looks good..

 

Really appreciate your time.

 

[cfx 12 Likes (Newbie)]

ok - looks good.

 

Obviously it's still sequenced in the masterTL but what about precise timing control - I take it as the audio isn't actually added to the tl I'll have to use audio methods to do that?

 

 

[cfx 12 Likes (Newbie)]

Final update

==========

 

Ok, switched to howler to manage sound across devices and took sounds off the masterTL and put them within the individual timeline functions then started/stopped sounds with eventCallbacks and its syncs perfectly and means sounds don't need to be exactly the right length.

 

<CODE>

 

var rumble = new Howl({
  src: ['mySound.mp3', 'mySound.ogg'], loop: false
});

 

function player (sound) {
   sound.play();
}
function playerStop (sound) {
   sound.stop();
}

 

function runText (textLine) {
  TweenLite.set(textLine, {visibility:"visible"});
  var mySplitText = new SplitText(textLine, { type: "chars" }),
  tl = new TimelineMax();
  tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04)
    .eventCallback("onStart", player, [mySound])
    .eventCallback("onComplete", playerStop, [mySound]);
  return tl;
}

 

var masterTL = new TimelineMax();
masterTL.add(someFunction(), 0)
.add(runText("#myText"), 1.35)
.add(someOtherFunction), 2)

 

Updated the pen for any interested. Appreciate all the help.

 

Buzz

[Carl 9,066 Likes (Superhero)]

cool. glad you got it working

[cfx 12 Likes (Newbie)]

Guys,

 

hate to open this topic again but I'm not getting the control over the sound I need with the set up I had, I also tried using the code as you had it Carl but I'm still getting a double playback on the sound. I'm obviously doing this completely wrong. Can anybody suggest the best way to trigger a sound with timing control? I'd be immensely grateful.

 

I've updated the pen at the top with latest code sample...

[Carl 9,066 Likes (Superhero)]

It looks like you were loading in multiple versions of TweenMax, TweenLite, TimelineLite and TimelineMax. You only need to load TweenMax (as it includes all the core tools).

 

Please see if this fork works for you

 

See the Pen wyJNmo by GreenSock (@GreenSock) on CodePen

 

[GreenSock 8,117 Likes (Superhero)]

I was looking into this and saw the problem simply had to do with the fact that when the playhead was moved backwards past that call() spot, it would trigger it (which is what it SHOULD do in theory). However, I think the most intuitive behavior when you're rewinding or going from the very end to the very beginning would be to suppress callbacks, so I made that change late last night and uploaded an updated version to the codepen URL (the updated version isn't in the main zip downloads yet). Sorry about any confusion that caused. So you'd probably need to clear your cache to make sure you're getting the latest version. 

 

Is it working better for you now? 

[cfx 12 Likes (Newbie)]

Guys,

 

Firstly, I was deeply impressed/grateful when Carl posted back on a Saturday! But now I see Jacks post from yesterday - can I just say here I think your commitment to an already great product is outstanding, you gentlemen are totally invested in GSAP and it allows guys like me to say "yes, we'll depend on this library". I think of you now as brothers in arms - when we launch our new site we'll be doing an article on GSAP. 

 

Ok, I'm going to grab the updated TweenMax and try it on my dev pen and see how it goes. I am still struggling with timing from the aspect of just using the timeline to control sound events. Using a simple patch for now with a setTimeout inside the sound function to allow me to pass a unique time variable to control deployment - not ideal obviously, particularly as any changes to the timeline will mean individual changes to those times which defeats the great power of the dev tools to control the tl!

 

I've updated the pen so you can see what I'm aiming at. Again, if I'm being exceptionally dense feel free to humble me.

 

Meanwhile, massive thumbs (socks) up for the Green Team. You rock.

 

 

Buzz

[GreenSock 8,117 Likes (Superhero)]

Thanks for the kind words. Yeah, I think this community here is something really unique that makes GSAP even more special and trustworthy in a world of [seemingly] unending open source options littering the web (many of which are poorly supported). Very cool to hear that the timely responses boost your confidence. I'm looking forward to seeing the article you write. Please let us know when it's live. 

 

As for controlling sound events from a timeline, it should be as simple as dropping a call() into a timeline wherever you want a sound triggered. No need to fumble around with a bunch of setTimeout() calls (which wouldn't be synchronized with the GSAP timeline, like if you ever scrubbed the playhead or made it jump elsewhere). See what I mean? 

 

Let us know if you have any other questions. Happy to help. 

[cfx 12 Likes (Newbie)]

Thanks Jack.

 

Yes I do see and tried this earlier in the process but it wasn't working. However loaded the two new files you used for TweenMax and GSDevTools and used 

 

.call(player, [mySound], this, position)

 

on the masterTL and all is working!!

 

Nearly finished my anim now and can't say how grateful I am. Thank you so much - I'm really sorry if I caused you guys a bunch of work. 

 

Buzz

[GreenSock 8,117 Likes (Superhero)]

That's great, @cfx. Thanks for reporting back. Glad you got everything working. 

[cfx 12 Likes (Newbie)]

Wouldn't have done it without you guys.