Passing variable between functions in Javascript (Titanium Studio Desktop)

Hopefully I can articulate this problem well. I'm working on a simple audio player in Titanium Desktop. The primary code I'm focused on right now is the following:

function pickMusicFolder (){
    var win = Titanium.UI.getCurrentWindow();

    win.openFolderChooserDialog(function(folderResponse) {
        var file = Titanium.Filesystem.getFile(folderResponse[0]);
        var listing = file.getDirectoryListing();
        for (var i = 0; i < listing.length; i++) {
            if (listing[i].isDirectory()) {
                // if the listing is a directory, skip over it
                $('#main').append('DIRECTORY: ' + listing[i].nativePath() +
                    '<br />');
                // continue;
            }
            else {
                // otherwise, print the filename of the file to the #main content window
                var songOnList = listing[i].nativePath();
                var songURL = songOnList.replace(/\\/g,"/");
                $('#main ul').append('<li><a href="javascript:playSong(\'' + songURL + '\')">' + songURL + '</a></li>');
            }
        }
    });
};

function playSong(songURL){
    var currentSong = Titanium.Media.createSound(songURL);
    currentSong.play();

    this.stopPlayback = stopPlayback;

    function stopPlayback(currentSong){
        currentSong.stop();
    }
}

And then related HTML:

<input type="image" src="img/player_stop.png" name="stopPlayback" onClick="playSong.stopPlayback(songURL)" />
<input type="image" src="img/folder_add.png" name="pickMusicFolder" onClick="pickMusicFolder()" />

Now, both pickMusicFolder and playSong itself work properly. However, stopPlayback isn't working, I'm having a really hard time grasping how to deal with different functions for playing and stopping audio, since the code that's generating the clickable links is completely compartmentalized within the pickMusicFolder function, while the code for stopping playback is only attached to the one separate interface button.

I simply need access to the songURL variable between multiple functions in order to be able to perform operations on one solitary开发者_如何学编程 song while it's playing (or not). I'm avoiding resorting to global variables, as I find that to be sort of a cop out.

Anyone have any ideas? Any tips are much appreciated! (Oh, and please ignore my ugly code; was trying a bunch of hack-y solutions before posting.)

Very quickly solution is to store currentSong as property of function playSong:

function playSong(songURL){
  var currentSong = Titanium.Media.createSound(songURL);
  playSong.currentSong = currentSong; // store curernt playing song as property of function
  currentSong.play();
}

playSong.stopPlayback = function() {
  if (playSong.currentSong) {
    playSong.currentSong.stop();
    delete playSong.currentSong;
  }
};

when song will be stopped just remove this property that would mean no song are playing now

You should use a closure. See below

var stopPlayback = function() { /* Placeholder, defined later */ };

var playSong = function(songURL){
  var currentSong = Titanium.Media.createSound(songURL);
  currentSong.play();

  // Redefine stopSong in the parent scope
  stopPlayback = function(){
    // currentSong is available to this function via closure
    currentSong.stop();
  }
}

HTML Edit

<input type="image" src="img/player_stop.png" name="stopPlayback" onClick="stopPlayback()" />

As a side note, you should not be using HTML attributes to attach JavaScript events. This is a great series on event attachment, but what you really should read is this part. Also, every JS library provides methods for attaching events to make your life easier.