I'm creating an audio playlist of stories about works of art - over 20 short pieces of audio about artworks in my local hospital which people will be able to listen to on their phones.
It's all on one phone sized web page which users can scroll through and click to listen.
Obviously it's one page which will have one URL on the website but I would also like a URL for each story so I can make QR codes to go next to the artworks.
Is there a way of generating Smart URLs so people can zap the code and be taken directly to that particular audio story ?
That's not going to work for me because that would mean having 20+ scenes.
What I need to be able to do is create a URL for each mp3 file which opens the playlist and picks the track.
The one problem you will run into though, is you will NOT be able to auto play.
Browsers want a user to show intent for audio to play. Therefore you will need to have the user interact with a click for playing sound or some such mechanism.
In this example, the url that the qr code redirects to would be something like
https://YOURURL?songid=3
On scene load or prep for display will run js to get the search query and use it in the code
var songList = hypeDocument.customData.songList
var paramsString = window.location.search
let searchParams = new URLSearchParams(paramsString);
hypeDocument.customData.theSong_id = searchParams.get('songid' )
Great solution - my original thought was how can I create multiple URLs from one page but this is more like it's the URL which is controlling the app by saying play song1 or song2 or song20. That's brilliant
I'm slightly confused about the name of the songs. Do the names in the song list have to be the same as the song name in resources or is it just bringing them in from the songIndex ?
Ideally I want to be able to show the title and singer name in the window so people can see what they are listening to.
Each object in the song list is a record of any song details you need to access.
The song index is the records id or index number. This is used to get the correct record and itself will be associated with a button for a track.
Once we know the track's song index we then can get the details we want from the corresponding record. using the key names. i.e name ( which in this case is the file name ), singer and so on.
The name key in each record probably should be changed to file_name ( notice I do not use spaces in the key names.)
If you do change the key name then make sure you also change the reference to it in the rest of the code. substituting name with file_name
The file_name is used to find the correct mp3 file in the resources.
If you want to add more details (actually called properties) to each record. you can just add them but all records must have the same key names.
So a record could look like this.
"songIndex": 1,
"file_name": "song1",
"track_name": "Blue and Red Crayons, 1991",
"singer": "Peter Logan"
It's working great with 24 tracks - same as the main playlist. Can you explain how I get it to show the track name from the songlist and how I could insert a pause button ?
So this is the script which picks which track to play from the url:
var songList = hypeDocument.customData.songList
var audio = document.getElementById('myaudio'); //Get hidden audio control elements
var song = songList[hypeDocument.customData.theSong_id]
audio.src=hypeDocument.resourcesFolderURL()+"/"+ song.track + ".mp3";
myaudio.play();
But if I add a pause control like this it does not work:
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
and if I add a separate javascript : myAudio.pause();
It stops playing but of course when I click play iy goes back to the start.
As some my audio pieces are up to ten minutes long I'd like to play and pause.
Would it be possible for you to post a zip of your current .hype project? (specifically the one where you have the code that doesn't work). I think it would be easier to determine what is happening, as it could be any number of things from just glancing at the posted code. Thanks!
The issue is in your play/pause functions your variable name is audio but you are using an incorrect myAudio variable name in the play function and myaudio in the pause function. Both of these need to be changed to just audio.
As a side note, whenever you set the audio.src, you won't be able to resume playback from where you left off. If you want it to reset, then this is fine. If you don't want it reset, then you should do the assignment conditionally in the play/pause functions to look like:
Thanks Mark and Jonathan for your help. Here's my latest version. People can click on one of 22 QR codes and listen to the linked audio, then if they want more they can click on the full web app and listen to them all.
Kind of - it's a new way to enjoy the Hospital's art collection - stories you can listen to even if you're lying in a hospital bed. You can access in two ways - the full playlist or QR codes next to the art. To keep it simple for me because I struggle with the coding stuff, I've done it as two separate apps with the same content.
