Click Widget, Play Sound

[keith28]

I'm working on a widget.
I need to add a function to this javascript(myscript.js)

When a user clicks any where on front on it, it loads "sound.mp3"
How is the best way to handle this and where to place it in the script.
I would appreciate the help.


[code]var sprite;
var num = 3;
var pulserate = getSpeedDelay();
var ud = "u";
var TrnImages;
var BkImages;
var dir;

list = new Array('1.png','2.png','3.png','4.png','5.png');

widget.onshow = onshow;
widget.onremove = onremove;

function setup()
{
    if(window.widget) // always check to make sure that you are running in Dashboard
    {
        // The preferences are retrieved:
        var bf = widget.preferenceForKey(createkey("TrnImages"));
        var bk = widget.preferenceForKey(createkey("BkImages"));

        if (bf) {
            TrnImages = bf;
        } else {
            TrnImages = "Cartoon01";
        }
        if (bk) {
            BkImages = bk;
        } else {
            BkImages = "bg/Clouds.png";
        }
    }
    loadup();
    document.getElementById("widget").style.backgroundImage = BkImages;
    setSelectors();
}

function onshow () {
    if(window.widget) {
        if (TrnImages == "Random") {
            loadup();
        }
    }
}

function doAnimate(sprite) {
    if(num == 4 || ud == "d") {
        ud = "d";
        num--;
        }
    if(num < 0 || ud == "u") {
        ud="u";
        num++;
        }
    // change frames
    document.getElementById(sprite).src = dir + list[num];

    // do it again
    timerID = setTimeout("doAnimate('" + sprite + "')", pulserate);
    }

function cease(sprite) {
    clearTimeout(timerID);
    document.getElementById(sprite).src = dir + '4.png';
    num = 4;
    }

function getSpeedDelay() {
    obj = 40;
    return obj;
    }

function pickRandom(range) {
    return Math.round(Math.random() * (range-1));
}

function setPref(thePref) {
    if(window.widget)
    {
        TrnImages = thePref;
        widget.setPreferenceForKey(thePref, createkey("TrnImages"));
        loadup();
    }
}

function createkey(key)
{
    return widget.identifier + "-" + key;
}

function setSelectors() {
    var theMenuItem;

    if (TrnImages == "Cartoon01") theMenuItem = 0;
    if (TrnImages == "Cartoon02") theMenuItem = 1;
    if (TrnImages == "Cartoon03") theMenuItem = 2;
    if (TrnImages == "Cartoon04") theMenuItem = 3;
    if (TrnImages == "Cartoon05") theMenuItem = 4;
    if (TrnImages == "Cartoon06") theMenuItem = 5;
    if (TrnImages == "Cartoon07") theMenuItem = 6;
    if (TrnImages == "Random") theMenuItem = 7;
    
    document.getElementById('CartoonType').options[theMenuItem].selected = true;

    if (BkImages == "url('bg/01.png')") theMenuItem = 0;
    if (BkImages == "url('bg/02.png')") theMenuItem = 1;
    if (BkImages == "url('bg/03.png')") theMenuItem = 2;
    if (BkImages == "url('bg/04.png')") theMenuItem = 3;
    if (BkImages == "none") theMenuItem = 4;

    document.getElementById('bgtype').options[theMenuItem].selected = true;
}

function loadup(x) {
    if(x) {
        dir = x;
    } else {
        dir = TrnImages;
    }

    if(dir == "Random") {
        var ic = 7;
        var MnRls = new Array(ic);
        MnRls[0] = "Cartoon01";
        MnRls[1] = "Cartoon02";
        MnRls[2] = "Cartoon03";
        MnRls[3] = "Cartoon04";
        MnRls[4] = "Cartoon05";
        MnRls[5] = "Cartoon06";
        MnRls[6] = "Cartoon07";

        var choice = pickRandom(ic);

        dir = MnRls[choice];
    }

    dir += "/";
    var theSprite = document.getElementById("theSprite");
    theSprite.src = dir + "4.png";
}
    
function bg(b) {
    if(b) {
        if(b!="none") b = "url('" + b + "')";
        document.getElementById("widget").style.backgroundImage = b;
        if(window.widget) {
            widget.setPreferenceForKey(b, createkey("BkImages"));
        }
    }
}

function goHome() {
        if (window.widget)
        {
            widget.openURL('http://www.mysite.com/index.php');
        }
}

function onremove ()
{
    if (window.widget)
    {
        widget.setPreferenceForKey (null, createkey("TrnImages"));
        widget.setPreferenceForKey (null, createkey("BkImages"));
    }
}

/*********************************/
// HIDING AND SHOWING PREFERENCES
/*********************************/

// showPrefs() is called when the preferences flipper is clicked upon.  It freezes the front of the widget,
// hides the front div, unhides the back div, and then flips the widget over.

function showPrefs()
{
    var front = document.getElementById("widget");
    var back = document.getElementById("back");
    
    if (window.widget)
        widget.prepareForTransition("ToBack");        // freezes the widget so that you can change it without the user noticing
    
    front.style.display="none";        // hide the front
    back.style.display="block";        // show the back
    
    if (window.widget)
        setTimeout ('widget.performTransition();', 0);        // and flip the widget over    

    document.getElementById('fliprollie').style.display = 'none';  // clean up the front side - hide the circle behind the info button

}


// hidePrefs() is called by the done button on the back side of the widget.  It performs the opposite transition
// as showPrefs() does.

function hidePrefs()
{
    var front = document.getElementById("widget");
    var back = document.getElementById("back");
    
    if (window.widget)
        widget.prepareForTransition("ToFront");        // freezes the widget and prepares it for the flip back to the front
    
    back.style.display="none";            // hide the back
    front.style.display="block";        // show the front
    
    if (window.widget)
        setTimeout ('widget.performTransition();', 0);        // and flip the widget back to the front
}


// PREFERENCE BUTTON ANIMATION (- the pref flipper fade in/out)

var flipShown = false;        // a flag used to signify if the flipper is currently shown or not.


// A structure that holds information that is needed for the animation to run.
var animation = {duration:0, starttime:0, to:1.0, now:0.0, from:0.0, firstElement:null, timer:null};


// mousemove() is the event handle assigned to the onmousemove property on the front div of the widget.
// It is triggered whenever a mouse is moved within the bounds of your widget.  It prepares the
// preference flipper fade and then calls animate() to performs the animation.

function mousemove (event)
{
    if (!flipShown)            // if the preferences flipper is not already showing...
    {
        if (animation.timer != null)            // reset the animation timer value, in case a value was left behind
        {
            clearInterval (animation.timer);
            animation.timer  = null;
        }
        
        var starttime = (new Date).getTime() - 13;         // set it back one frame
        
        animation.duration = 500;                                                // animation time, in ms
        animation.starttime = starttime;                                        // specify the start time
        animation.firstElement = document.getElementById ('flip');        // specify the element to fade
        animation.timer = setInterval ("animate();", 13);                        // set the animation function
        animation.from = animation.now;                                            // beginning opacity (not ness. 0)
        animation.to = 1.0;                                                        // final opacity
        animate();                                                                // begin animation
        flipShown = true;                                                        // mark the flipper as animated
    }
}

// mouseexit() is the opposite of mousemove() in that it preps the preferences flipper
// to disappear.  It adds the appropriate values to the animation data structure and sets the animation in motion.

function mouseexit (event)
{
    if (flipShown)
    {
        // fade in the flip widget
        if (animation.timer != null)
        {
            clearInterval (animation.timer);
            animation.timer  = null;
        }
        
        var starttime = (new Date).getTime() - 13;
        
        animation.duration = 500;
        animation.starttime = starttime;
        animation.firstElement = document.getElementById ('flip');
        animation.timer = setInterval ("animate();", 13);
        animation.from = animation.now;
        animation.to = 0.0;
        animate();
        flipShown = false;
    }
}


// animate() performs the fade animation for the preferences flipper. It uses the opacity CSS property to simulate a fade.

function animate()
{
    var T;
    var ease;
    var time = (new Date).getTime();
        
    
    T = limit_3(time-animation.starttime, 0, animation.duration);
    
    if (T >= animation.duration)
    {
        clearInterval (animation.timer);
        animation.timer = null;
        animation.now = animation.to;
    }
    else
    {
        ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
        animation.now = computeNextFloat (animation.from, animation.to, ease);
    }
    
    animation.firstElement.style.opacity = animation.now;
}


// these functions are utilities used by animate()

function limit_3 (a, b, c)
{
    return a < b ? b : (a > c ? c : a);
}

function computeNextFloat (from, to, ease)
{
    return from + (to - from) * ease;
}

// these functions are called when the info button itself receives onmouseover and onmouseout events

function enterflip(event)
{
    document.getElementById('fliprollie').style.display = 'block';
}

function exitflip(event)
{
    document.getElementById('fliprollie').style.display = 'none';
}


[/code]

[keith28]

Can anyone give me a hand with this?