Creating Smart URLs for a Hype web-app

23

Very cool project! I'm glad to get a mental image after helping out to see how it all fits together for the hospital now.

24

I'm recycling this web app in a new project and what to add the ability to play the next track or the previous track.

This is the play script:

var songList = hypeDocument.customData.songList

var audio = document.getElementById('myaudio');   //Get hidden audio control elements

var song = songList[hypeDocument.customData.theSong_id]

var coverImage = document.querySelector('.coverPic')
hypeDocument.setElementProperty(coverImage, 'background-image', "${resourcesFolderName}/" + song.pic)
$(".blurb").text(song.blurb)

 
var source = hypeDocument.resourcesFolderURL()+"/"+ song.track + ".mp3";
if(audio.src != source) {
	audio.src=source;
}

I'm guessing it's OK to change this to: song.track + 1 ".mp3"

What I can't figure out is how to go back to track one when it gets to the track 9, the last one.

Any thoughts ?

25

This by itself isn't syntactically valid. It should look more like song.track + "1" + ".mp3". However I don't think this is likely how you want to do it. You have a an array that has all the info, and so you can continue to use that and the theSong_id variable that represents the index into the array that is being played.

There's a few ways to do this, you could look at theSong_id as an index and see if it exceeds the length of the array if you were to increment it, and if so set it to 0. Or if you're going to the previous, if it would be a negative number then set it to the last time in the array to loop it back around. There's another technique that is kinda nifty from a programming standpoint that uses the modulus operator.

It is a little unclear how you'd want to do this, but based on the info (without rereading the whole thread), I'd probably make two hype functions that are triggered by button clicks or something like:

for a next button click:

var list = hypeDocument.customData.songList;
hypeDocument.customData.theSong_id = 
        (hypeDocument.customData.theSong_id + 1) % list.length;
var theSong_idText = hypeDocument.getElementById('songid')
theSong_idText.innerHTML = `Song ID =  ${hypeDocument.customData.theSong_id}`;
hypeDocument.functions().play(hypeDocument, element, event);

for a previous button click:

var list = hypeDocument.customData.songList;
hypeDocument.customData.theSong_id = 
        (hypeDocument.customData.theSong_id - 1 + list.length) % list.length;
var theSong_idText = hypeDocument.getElementById('songid')
theSong_idText.innerHTML = `Song ID =  ${hypeDocument.customData.theSong_id}`;
hypeDocument.functions().play(hypeDocument, element, event);
26

Thanks Jonathan - I'll give it a try and let you know

1 Like