Have any idea's of getting a new audio file to play with every click of this lesson?

Question

I am somewhat new to AS but still trying to learn and accomplish what seems like tough stuff. I will prevail!

The code below shows my progress so far. I have a UI Loader that has a series of thumbnails. With each click of the thumbnail a new SWF file loads... well I'm trying to get an external series of mp3 files to do the same through an XML file. So far, I've managed to just get one audio file to play with every click AND it play over the existing file.

I simply want to get a new one to play with each thumbnail AND stop the previous audio file from playing if/when the user clicks a new thumbnail.

Please assist if possible...help me see the errors of my way. A little overwhelmed.

var imagesXML:XML;
var xmlLoader: URLLoader = new URLLoader();
xmlLoader.addEventlistener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(new URLRequest("lessons/images/Images5.xml"));


/////////////////////////////////////////////////////////////
////////////    thumbnail loader    /////////////////////////

var mySound:Sound;
var myChannel:SoundChannel;


function xmlLoaded(evt:Event):void
{
imagesXML = new XML(xmlloader.data);
var thumbLoader:UILoader;
for(var i:uint = 0; i < imagesXML.image.length(); i++)
    {
        thumbLoader UILoader(getChildByName("thumb" + 1));
        thumbLoader.load(new URLRequest("lessons/images/thumbs/" + imagesXML.image[i].@file));
        thumbLoader.buttonmode = true;
        thumbLoader.addEventListener(MouseEvent.CLICK, thumbClicked);
        var fullPath:String = "lessons/images/file-1.swf";
        mainLoader.load(new URLRequest(fullpath));
    }
}



/////////////////////////////////////////////////////////////
////////////////   load Images  /////////////////////////////

function thumbClicked(evt:MouseEvent):void
{
    var thumbName:String = evt.currentTarget.name;
    var thumbIndex:uint = uint(thumbName.substr(5));
    var fullPath:String = "lessons/images/" + imagesXML.image[thumbIndex].@file;
    mainLoader.load(new URLRequest(fullPath));

//stop any sound playing
    if (myChannel != null)
    {
        myChannel.stop();
    }

// load mp3 file
    mySound = new Sound(); myChannel = new SoundChannel();
    mySound.load(new URLRequest ("lessons/audio/narration/ch1p3.mp3"));
    mySound.play();
}

---

EDIT

I also need to make the sound that plays dynamic based off the thumbnail that was clicked.

This is my updated code:

var imagesXML:XML;
var xmlLoader: URLLoader = new URLLoader();
xmlLoader.addEventlistener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(new URLRequest("lessons/images/Images5.xml"));

var thumbSounds:Dictionary = new Dictionary();


/////////////////////////////////////////////////////////////
////////////    thumbnail loader    /////////////////////////

var mySound:Sound;
var myChannel:SoundChannel;


function xmlLoaded(evt:Event):void
{
imagesXML = new XML(xmlloader.data);
var thumbLoader:UILoader;
for(var i:uint = 0; i < imagesXML.image.length(); i++)
    {
        thumbLoader UILoader(getChildByName("thumb" + 1));
        thumbLoader.load(new URLRequest("lessons/images/thumbs/" + imagesXML.image[i].@file));
        thumbLoader.buttonmode = true;
        thumbLoader.addEventListener(MouseEvent.CLICK, thumbClicked);
        var fullPath:String = "lessons/images/file-1.swf";
        mainLoader.load(new URLRequest(fullpath));
        thumbSounds[thumbLoader] = "lessons/audio/narration/sound/ch1" + i + ".mp3";

 //load mp3 file
       mySound = new Sound(); 
       myChannel = new SoundChannel();
       mySound.load(new URLRequest ("lessons/audio/narration/ch1p3.mp3"));
       myChannel = mySound.play();
    }
}



/////////////////////////////////////////////////////////////
////////////////   load Images  /////////////////////////////

function thumbClicked(evt:MouseEvent):void
{
    var thumbName:String = evt.currentTarget.name;
    var thumbIndex:uint = uint(thumbName.substr(5));
    var fullPath:String = "lessons/images/" + imagesXML.image[thumbIndex].@file;
    mainLoader.load(new URLRequest(fullPath));
//stop any sound playing
    if (myChannel != null)
       {
          trace("HOLD sound");
          SoundMixer.stopAll();
       }
    mySound = new Sound();
    myChannel = new SoundChannel();
    mySound.load(new URLRequest (thumbSounds[evt.currentTarget]));
    myChannel = mySound.play();

    trace("now playing" + thumbSounds[evt.currentTarget]);
}

Answer 1

All you are missing, is populating the myChannel var with the sound channel that is created and returned when you call play() on a Sound.

So, instead of doing:

myChannel = new SoundChannel();
//this creates an empty sound channel that has no relevance to anything you're doing
//so later when you do myChannel.stop(), you're just stopping this empty channel

Do this:

myChannel = mySound.play();
//play returns the relevant sound channel to what you've asked to play

So it should look like this:

mySound = new Sound();
mySound.load(new URLRequest ("lessons/audio/narration/ch1p3.mp3"));
myChannel = mySound.play();

Reading the documentation for the play function, you'll find the following:

Generates a new SoundChannel object to play back the sound. This method returns a SoundChannel object, which you access to stop the sound and to monitor volume.

---

EDT

To address your comments, you need to associate the audio file with each UILoader item somehow. You could do that by extending the UILoader class and adding a property, or you could use a dictionary, or you could parse the thumb path for the identifier.

I'll show you the dictionary approach as it's probably the easiest:

//at the top of your code with your other vars
var thumbSounds:Dictionary = new Dictionary();

Then when you create your UILoader items in that loop, do this:

thumbSounds[thumbLoader] = "lessons/audio/narration/ch1p" + i + ".mp3";
//I'm just guessing on your naming convention above, eg ch1p1.mp3, ch1p2.mp3 etc

Now, in your click handler where you play the sound, do this:

//in an event handler, the event's currentTarget is a reference to item that you added the listener to, in this case the thumb that was clicked.
mySound.load(new URLRequest (thumbSounds[evt.currentTarget]));