Jump to content

Click Widget, Play Sound


keith28

Recommended Posts

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]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.