Click on Widget, Play sound

[keith30]

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.


------------------------------------
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';
}

 

[keith30]

Can anyone give me a hand with this?

 

[tsuji]

Add an onclick handler to your "widget" with handler and check out this ref to get the idea on how to script it.

http://www.javascripter.net/faq/sound/play.htm

 

[keith30]

what is better to add the script to my .js file or my html file?

 

[tsuji]

I sure wouldn't think a place in .js is objectionable as long as it regroup all you need for the "widget". I would not be too philosophical on this. But,...