How make mp3 player stop when moving to different pages

[maryannm4]

Hi, I new to Flash  and Action Script 3.0.  I've just designed my first Flash website (for a band), and one of the pages has an MP3 player on the audio page.  It plays fine, as long as you're on that page.  But the problem is, when you go to a different page in the website, it keeps playing, and then when you return to the audio page, a new instance of the song that's playing starts playing on top of the song that's already playing. It's a jumble of sound that can't be stopped unless you close out of the website.

How can I make the mp3 player stop when someone leaves the audio page?  I'd like the songs to just play on that one page, and then stop if someone clicks a tab for a different page. I hope if I paste the code for the player below, somebody (please!) can help.  Thank you.

var my_songs:XMLList;
var my_total:Number;

var my_sound:Sound;
var my_channel:SoundChannel;

var current_song:Number = 0;

var song_position:Number;
var song_paused:Boolean;

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("playlist.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
var myXML:XML = new XML(e.target.data);

my_songs = myXML.SONG;
my_total = my_songs.length();

myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
myXMLLoader = null;

}

function playSong(mySong:Number):void{
var myTitle = my_songs[mySong].@TITLE;
var myArtist = my_songs[mySong].@ARTIST;
var myURL = my_songs[mySong].@URL;

title_txt.text = myTitle;
artist_txt.text = myArtist;

if (my_channel){
my_channel.stop();
my_channel.removeEventListener(Event.SOUND_COMPLETE, onNext);
}

my_sound = new Sound();
my_sound.load(new URLRequest(myURL));
my_channel = my_sound.play();
my_channel.addEventListener(Event.SOUND_COMPLETE, onNext);
}

next_btn.addEventListener(MouseEvent.CLICK, onNext);
function onNext(e:Event):void{ //This used to have MouseEvent, change it to Event
current_song++;
if (current_song>=my_total){
current_song=0;
}
playSong(current_song);
}

prev_btn.addEventListener(MouseEvent.CLICK, onPrev);
function onPrev(e:MouseEvent):void{
current_song--;
if (current_song<0){
current_song = my_total-1;
}
playSong(current_song);
}

pause_btn.addEventListener(MouseEvent.CLICK, onPause);
function onPause(e:MouseEvent):void{
if (my_channel){
song_position = my_channel.position;
my_channel.stop();
song_paused=true;
}
}

play_btn.addEventListener(MouseEvent.CLICK, onPlay);
function onPlay(e:MouseEvent):void{
if (song_paused){
my_channel = my_sound.play(song_position);
song_paused=false;
} else if (!my_channel){
playSong(current_song);
}
}

[kglad]

execute

my_channel.stop();

just prior to exiting that page.

[maryannm4]

Thank you. All of the website pages are movie clips, and the mp3 player is inside the audio page movie clip.  Do I put the code you suggested (below) on the main timeline, at the end of the audio movie clip frame, inside the audio page movie clip, or at the end of the existing code for the mp3 player?

Thanks for your patience . . .

execute

my_channel.stop();

just prior to exiting that page.

[kglad]

if my_channel is defined on a movieclip's timeline (say mc) and mc is on the timeline that contains your navigation code, then in your navigation code use:

mc.my_channel.stop();

[maryannm4]

Thank you for trying, but I'm lost.  No matter where I put the code, there were errors. I've just started learning AS3, so nothing about it is coming very easy.

[kglad]

do you have buttons that you use to navigate your swf?  if so, show the code used for one of your buttons.

[el pescado]

Hello, was this ever answered?  I have a similar post.  I am tweening in pages (all movie clips).

The music page and video pages will keep playing as you go to a new page.

Where do you use this code?


Thanks

[kglad]

if you have an mp3 player that's been added to the displaylist, you can use the removedfromstage event to trigger your mp3 to stop.

[el pescado]

Hey Kglad,

I have 5 Pages.  Home, Bio, Music, Video and Contact.  Each are Stage size movieclips.  I tween them in using AS3.  You actually assisted me with learning that technique a few weeks ago.

So, if I tween in music_mc, it contains the a music player (the music page).  In that clip I have the player with the play, pause, forward and previous button.  Similar code as stated in this post - if not the exact same.  I have it playing OK I think.  Then, say I go to video. First, the music is still playing and secondly, if I play the movie I have both going at once.  Quite annoying.

I don't want to lose the tweening page effect (after all, I worked hard to get that down right?).  I just want the music or video to stop when I go to the other pages (movieclips).

Thanks.

[kglad]

if your music player is mplayer, you can use:

mplayer.addEventListener(Event.REMOVED_FROM_STAGE,stopsoundF);

function stopsoundF(e:Event){

// stop your sound

}

[el pescado]

Hey Kglad,

I read about this but it doesn't seem to work for me.  Car3 is a music page.  It contains the XML mp3 player with the buttons.

I added your code in as you mentioned.  When I play the music, hit say home page.......home slides in, music still on. I can send you the URL through message if you want to take a look.

Code as follows:

//must add for all tween and easing

import fl.transitions.Tween;

import fl.transitions.easing.*;

//buttons association with movie clips

btn1.mc=car1;

btn2.mc=car2;

btn3.mc=car3;

btn4.mc=car4;

btn5.mc=car5;

var curMarkerXPos:Number = btn1.x;

var duration:Number = 1.3;

function markerFollow (event:MouseEvent):void {

var markerTween:Tween = new Tween(marker, "x", Strong.easeOut, curMarkerXPos, event.target.x, duration, true);

curMarkerXPos = event.target.x;

}

btn1.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

btn2.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

btn3.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

btn4.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

btn5.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

//movie clip car1 possition to start the movie

car1.x=0;

car1.y=0;

//button control and event listeners

var currentMC:MovieClip = car1;

btn1.addEventListener(MouseEvent.CLICK,f);

btn2.addEventListener(MouseEvent.CLICK,f);

btn3.addEventListener(MouseEvent.CLICK,f);

btn4.addEventListener(MouseEvent.CLICK,f);

btn5.addEventListener(MouseEvent.CLICK,f);

//you add this code to each button.  make the movie clip act as button on rollover

btn1.mouseChildren=false;

btn1.buttonMode=true;

btn2.mouseChildren=false;

btn2.buttonMode=true;

btn3.mouseChildren=false;

btn3.buttonMode=true;

btn4.mouseChildren=false;

btn4.buttonMode=true;

btn5.mouseChildren=false;

btn5.buttonMode=true;

var tweenOut:Tween;

var tweenIn:Tween;

//your defined function.  tells current MC to slide out as new one slides in.

function f(e:MouseEvent) {

tweenOut=new Tween(currentMC,"x",Strong.easeOut,currentMC.x,stage.stageWidth,2,true);

currentMC=e.currentTarget.mc;

currentMC.x=-currentMC.width;

tweenIn=new Tween(currentMC,"x",Strong.easeOut,currentMC.x,0,2,true);

}

car3.addEventListener(Event.REMOVED_FROM_STAGE,stopsoundF);

function stopsoundF(e:Event){

// stop your sound

}

[kglad]

did you add code to stop your sound?

[el pescado]

Yes, right at the bottom.  I added the code you gave me.  These buttons are on the main timeline.  They call the pages/movieclips which are named cars1, cars2, cars3, cars4 and cars5.

I also have a page with and encoded video.  I need that to turn off as it tweens off the stage as well.

[kglad]

i don't see any code to stop your sound.  i just see the comment i made that you should stop your sound.

[el pescado]

Like this?

car3.addEventListener(Event.REMOVED_FROM_STAGE,stopsoundF);

function stopsoundF(e:Event){

car3.my_channel.stop();

}

Just tried it and it doesn't work.  Am I creating the Event listener on the main buttons (home, bio, music, etc)?  I tried both and the sound still remains on.  I might not be explaining this correctly. 

[kglad]

do you see any trace output using:

car3.addEventListener(Event.REMOVED_FROM_STAGE,stopsoundF);

function stopsoundF(e:Event){

trace("**** removed");

car3.my_channel.stop();

}

[el pescado]

No, I don't. 

Obviously, something I am doing wrong.  Aggh! 

I redid my code so it is more clear.  That music movie clip slides off the page, music remains on.

import fl.transitions.Tween;

import fl.transitions.easing.*;

home_btn.mc=home;

bio_btn.mc=bio;

music_btn.mc=music;

video_btn.mc=video;

contact_btn.mc=contact;

var curMarkerXPos:Number = home.x;

var duration:Number = 1.3;

function markerFollow (event:MouseEvent):void {

var markerTween:Tween = new Tween(marker, "x", Strong.easeOut, curMarkerXPos, event.target.x, duration, true);

curMarkerXPos = event.target.x;

}

home_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

bio_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

music_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

video_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

contact_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

home.x=0;

home.y=0;

var currentMC:MovieClip = home;

home_btn.addEventListener(MouseEvent.CLICK,f);

bio_btn.addEventListener(MouseEvent.CLICK,f);

music_btn.addEventListener(MouseEvent.CLICK,f);

video_btn.addEventListener(MouseEvent.CLICK,f);

contact_btn.addEventListener(MouseEvent.CLICK,f);

home_btn.mouseChildren=false;

home_btn.buttonMode=true;

bio_btn.mouseChildren=false;

bio_btn.buttonMode=true;

music_btn.mouseChildren=false;

music_btn.buttonMode=true;

video_btn.mouseChildren=false;

video_btn.buttonMode=true;

contact_btn.mouseChildren=false;

contact_btn.buttonMode=true;

var tweenOut:Tween;

var tweenIn:Tween;

function f(e:MouseEvent) {

tweenOut=new Tween(currentMC,"x",Strong.easeOut,currentMC.x,stage.stageWidth,2,true);

currentMC=e.currentTarget.mc;

currentMC.x=-currentMC.width;

tweenIn=new Tween(currentMC,"x",Strong.easeOut,currentMC.x,0,2,true);

}

music.addEventListener(Event.REMOVED_FROM_STAGE,stopsoundF);

function stopsoundF(e:Event){

trace("**** removed");

music.my_channel.stop();

}

[kglad]

then car3 wasn't being removed from the displaylist.  and, if your current code fails to trace, music isn't removed from the displaylist.

[el pescado]

Hmmm......you lost me there.  Not sure how the music mc (renamed from car3) can't be on the displaylist.

I'm reading up to see what I am missing.

In the music mc, I have the XML player with the code mentioned at the very top of this post.

I get that a trace would show it working.  Maybe I am not explaining this right?

[kglad]

when you click a button and to change from the mp3 player to something else, is anything being removed from the display list?

[el pescado]

Hey Kglad, thought you dropped me.

No, not that I know of......if all pages (which are movieclips) remain on the stage, they should be part of the display list still, correct?  You actually were the one that helped me get this slide effect down.  Now, I have to figure this out.

I am sending you my test URL where I have posted this site via Adobe private message.

[kglad]

then you can't use that removedfromstage event.  remove that code.

is something "tweening" off-stage when you move from your mp3 player to a different page?  if yes, you can use the tween class'es motionfinish event to trigger your sound to stop.

[el pescado]

On the main timeline and stage, there are 5 buttons (home_btn, bio_btn, etc.).  I attached the above code which tweens in 5 moive clips named: home, bio, music, video and contact.  Movie clips are originally off to the side of the stage.  As mentioned, you helped me to learn this effect.  I studied the code, I get what it is doing and how it tweens in and out the movie clip pages.

Within the music movie clip/page, there are player buttons (play, pause, previous, forward).  They are coded as mentioned by the woman who created this post originally.  Same code.  Using a sound channel and XML file to call in different songs and text. 

So, I would imagine that I would have to add code to the main timeline where I have my buttons, right?  So, if I tween in the music page.....hit play, the music plays.  Then if I hit one of the main movie clip buttons (home, bio, etc), an event listener would trigger a function to shut off the music right? 

Something like:

home_btn.addEventListener(TweenEvent.MOTION_FINISH, removemusic);

function removemusic(e:Event){

    //remove the movieclip

}

I can post the .fla or send it to you if you want to look at it.

[kglad]

(i don't usually download and correct files unless i'm hired.)

actually, your code should look more like:

home_btn.addEventListener(MouseEvent.CLICK,homeF);

function homeF(e:MouseEvent){

// tween the home movieclip(s) onto the stage

// tween the current on-stage objects off-stage.  this tween should have a motionfinish event listener so

// when the mp3 display objects are tweened off-stage, you stop() your soundchannel instance.

}

[el pescado]

I get you.....you want me to learn.  I am stubborn, I'll keep going.

I set up the main timeline as below.  I added new EventListners with the MOTION_FINISH for tweening off.  Get this error "1046: Type was not found or was not a compile-time constant: TweenEvent".

Code:

//Must add for all tween and easing - Tween Class

import fl.transitions.Tween;

import fl.transitions.easing.*;

//Buttons association with movie clips - Main Menu

home_btn.mc=home;

bio_btn.mc=bio;

music_btn.mc=music;

video_btn.mc=video;

contact_btn.mc=contact;

//Button Follower Follow Code

var curMarkerXPos:Number = home.x;

var duration:Number = 1.3;

function markerFollow (event:MouseEvent):void {

var markerTween:Tween = new Tween(marker, "x", Strong.easeOut, curMarkerXPos, event.target.x, duration, true);

curMarkerXPos = event.target.x;

}

//Event Listeners for Marker tfollwer

home_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

bio_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

music_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

video_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

contact_btn.addEventListener(MouseEvent.ROLL_OVER, markerFollow);

//Movie clip car1 possition to start the movie, registration point TL

home.x=0;

home.y=0;

//Button control and event listeners for Tween onto stage

var currentMC:MovieClip = home;

home_btn.addEventListener(MouseEvent.CLICK,onStage);

bio_btn.addEventListener(MouseEvent.CLICK,onStage);

music_btn.addEventListener(MouseEvent.CLICK,onStage);

video_btn.addEventListener(MouseEvent.CLICK,onStage);

contact_btn.addEventListener(MouseEvent.CLICK,onStage);

//Button control and event listeners for Tween off stage

home_btn.addEventListener(TweenEvent.MOTION_FINISH,offStage);

bio_btn.addEventListener(TweenEvent.MOTION_FINISH,offStage);

music_btn.addEventListener(TweenEvent.MOTION_FINISH,offStage);

video_btn.addEventListener(TweenEvent.MOTION_FINISH,offStage);

contact_btn.addEventListener(TweenEvent.MOTION_FINISH,offStage);

//You add this code to each button.  make the movie clip act as button on rollover

home_btn.mouseChildren=false;

home_btn.buttonMode=true;

bio_btn.mouseChildren=false;

bio_btn.buttonMode=true;

music_btn.mouseChildren=false;

music_btn.buttonMode=true;

video_btn.mouseChildren=false;

video_btn.buttonMode=true;

contact_btn.mouseChildren=false;

contact_btn.buttonMode=true;

//Function for tweening new MC onto the stage

function onStage(e:MouseEvent) {

var tweenIn:Tween=new Tween(currentMC,"x",Strong.easeOut,currentMC.x,0,2,true);

currentMC=e.currentTarget.mc;

currentMC.x=-currentMC.width;

}

//Function for tweening off current MC from stage

function offStage(e:TweenEvent) {

var tweenOut:Tween=new Tween(currentMC,"x",Strong.easeOut,currentMC.x,stage.stageWidth,2,true);

currentMC=e.currentTarget.mc;

currentMC.x=-currentMC.width;

}