Home/ Questions/Q 6906181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T08:16:37+00:00

Trying to play a sound via javascript and want to change it dynamically using

  • 0

Trying to play a sound via javascript and want to change it dynamically using sessionstorage

The following is a simplified version that plays sound/s in android/FF Linux/Win when u click the “sprite me button” – I’ve included other buttons for the example to set and retrieve session values in HTML5.

http://globability.org/webapp/asprite20111124_8.html

The wiki below has Android phone specs where it works: (Samsung Galaxy SII) in case you’re interested

http://globability.org/wiki/doku.php?id=current_working_specs_p-tab / also see http://globability.org/wiki/doku.php?id=mobile_pointing_tablet to get a proper idea about what it is that I am working on.

What I need is to have the “play soundsprite” javascript that you can see below in the following section load from sessionstorage and insert values loaded from sessionstorage inserted into an array.

I am not looking for any changes is how the sound is played back – just need to make a dynamically built array work from within the particular javascript.

The code below is based on the soundsprite idea from http://www.phpied.com/audio-sprites/ by Stoyan Stefanov – made to reduce the http calls needed for playing sounds… Also stabilizes the sound quality, less choppy sound etc.

Antway here goes: YOU ONLY NEED TO LOOK AT PSEUDOCODE SECTION – The rest is functioning

<script>
var thing = 'the thing';

function shut() {
if (typeof thing.pause !== 'undefined') {
    thing.pause();
}
}

function log(what) {
document.getElementById('log').innerHTML += what + "<br>";
}

var spriteme = function(){
var sprites = {
// id: [start, length]

'blank':[0.1, 0.5], //This the first sprite, it has to be the first defined and is 
called first, it is a blank piece of sound in the combined sound file and needed as of 
now.

'success':[13,  2,5],

/* I would like to be able to set the parameters i.e. sound bite to play dynamically - 
here a pseudocode example using session storage in preparation for getting the sound 
parameters from a database


'wordgen'[null,null]; 
//this array should be dynamically built from values read from the two session storage keys not sure you need the new thing in HTML5

sessionStorage.globabilitykey1;
sessionStorage.globabilitykey2;

strkey1=globabilitykey1
strkey2=globabilitykey2

var gkey1=parsefloat(strkey1)
var gkey2=parsefloat(strkey2)

'wordgen':[gkey1,gkey2]


and then the idea is to replace the array success in the script with the "generated" 
array 'wordgen' to allow dynamic seting of sound to play back  */       

//the following are sound bites from the collection of soundsprites the site plays from

'word1': [0.5, 2,36], //one
'word2': [3.1,  3.0], //two
'word3': [7.0,  1.82], //three
'word4': [10.03, 2], //four ?

},
song = ['blank', 'success'], 
//here you're setting the playback sequence (this is where I would like to replace 'success' with 'wordgen'
current = 0,
id = song[current],
start = 0,
end = sprites[id][1],
int;

thing = document.getElementById('sprite');
thing.play();

log('file: ' + thing.currentSrc);
log(id + ': start: ' + sprites[id].join(', length: '));

// change
int = setInterval(function() {
if (thing.currentTime > end) {
thing.pause();
if (current === song.length - 1) {
clearInterval(int);
return;
}
current++;
id = song[current];
start = sprites[id][0];
end = start + sprites[id][1]
thing.currentTime = start;
thing.play();
log(id + ': start: ' + sprites[id].join(', length: '));
}
}, 10);   
};
</script>

Any ideas on how to dynamically create the ‘wordgen’ array within the javascript based on the values is sessionstorage ?

The whole code/working example can be seen here: http://globability.org/webapp/asprite20111124_8.html

I know the page is one ugly mess… but this is an alpha prototype 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Argh… it was sooooo simple, I was this close to solving it myself, however a kind freelancer at freelancer.com who has perviously helped me getting one of my ideas to work did it again this time…

    And without further ado:

    ‘wordgen’:eval(“[“+sessionStorage.globabilitykey1+”,”+sessionStorage.globabilitykey2+”]”),

    That was what I needed – I had been trying to do the same but without the ” eval ” in front and the paranthesis around the arguments….

    Oh and don’t forget to set the value by clicking the button before you try or there will be no sound coming out of your speakers 😉

    Here’s a link to the working page if you care to try and if you want to see the code in it’s “entirity”: http://globability.org/webapp/asprite20111201_2.html – Thanks to those of you voting the question up!!!

    • 0