Creating Smart URLs for a Hype web-app

[alastair]

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 ?

[Daniel]

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

Linking to a specific scene from inside and outside of a Tumult Hype document

Tumult Hype documents are accessible from a single URL. If you name your document 'Flying' and upload it to your site, then your animation and all its scenes are accessible from http://example.com/flying.html (unless you change the name of your exported .html file). This article describes three ways to navigate between scenes: Load a scene directly from a URL (For example: http://site.com/hypedocument.html#contact) Use a button outside of your Tumult Hype document to load a scene in that docu…

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

[alastair]

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.

[MarkHunte]

You can use

URLSearchParams - Web APIs | MDN

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)

[alastair]

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

[alastair]

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

[alastair]

	//https://YOURURL?songid=songid
	
	var audio = document.getElementById('myaudio');   //Get hidden audio control elements
	audio.pause();

	hypeDocument.customData.songList = [
{
    "songIndex": 0,
    "name": "null",
    "singer": "null"
},
{
    "songIndex": 1,
    "name": "Blue and Red Crayons, 1991",
    "singer": "Peter Logan"
},

[alastair]

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.

[MarkHunte]

If I remember correctly. Yes

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"