Creating Smart URLs for a Hype web-app

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 ?

If each story is on its own scene, you can use this technique:

It would be an URL like https://example.com/hypeexport.html#artworkname where artworkname is the name of the scene.

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.

You can use

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' )

The landing page has a button to start the audio.

Clicking that runs the js to play the audio, which sets the audio src and plays it

urlsong.hype.zip (555.8 KB)

Screenshot 2024-05-18 at 12.07.52

Screenshot 2024-05-18 at 12.08.12

Screenshot 2024-05-18 at 12.07.29

2 Likes

This is exactly the sort of thing I was thinking of - it just needs a play button and a link to the full playlist. I will try it out and report back

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

1 Like