Audio playlist with javascript arrays

[alastair]

I am trying to make an audio playlist for around 20 pieces of audio, each with title, artist name and small graphic.

When I have done audio projects before I have given each track its own javascript to play, pause, forward 20 and rewind 20. This works fine with a few tracks but clunky with more, so it needs javascript arrays for the name, title and graphic - that is where I begin to struggle.

I have been looking at Hypedocks where there is a good example:

HypeDocks » UI Music Player

This is exactly the sort of thing I want to do - but it’s complicated.

I don’t understand how the play and pause function works - jquery I think - and if I ungroup the playlist and add additional tracks, it goes wrong.

Is there an easier way to add data from a javascript array into placeholders in a Hype document ?

Can anybody advise please ?

I realise this goes beyond Hype but I suspect it would be useful to a lot of people.

[Photics]

@alastair

Is there an easier way to add data from a javascript array into placeholders in a Hype document ?

This free Hype Template shows how to use a “multidimensional” array to change the contents of elements…

• Free Template Tuesday #11 – Tumult Hype “Multilingual” – Photics.com

…and there's a video…

• https://www.youtube.com/watch?v=bfNxviLRN5w&list=PLORkPhKfIRglpDfk0PcLCnC4a1SiRDbaX

As for the audio, I might use Howler.js (to start and stop the audio) if I was working on such a project.

• GitHub - goldfire/howler.js: Javascript audio library for the modern web.

I haven't put the two together, but it looks like there was discussion about Howler over here… Create Audio playlist with Howler.js

Just theoretically imagining how the project could work, the challenge would be managing the playlist while grabbing data from the array. That's basically some JavaScript. And if you're at that level of coding, you might not need Howler.

Now that I think about it, I actually did something like this already without Howler. Although, I was using Swift to get a list of songs to play and then using Swift to play those songs…

• Widgets – Version 1.8 Update – Photics.com

…it's a similar idea as the Multilingual template. Grab the data, then change the content in specific elements.

[alastair]

This is a really useful way of entering multiple variables that all change in one click - itext, mages and remote images all work nicely.

I haven't yet tried adding sounds but can't seen any reason why it won't work.

Watch this space!

[MarkHunte]

Don't ungroup.

How I would add the rows is:

Select the ListGroup

Add a guid to its top edge.

---

Copy the ListGroup and paste it into a new Hype doc.

Set a guide to its bottom edge,

and the drag it open so you can see all the rows.

Duplicate one of the music_group groups inside it and drag it to the correct position.

So in the shown example;
I re name these to match the others in sequence.
music_group
Rounded rectangle
active group
Play button
number text

I give the correct sequenced ids to these elements.

So IDS =

music_group = list10
active group = active10
Play button= m10
number text = number10

--

Set the innerHTML for the
Singer Name and the Song Title
Change the cover image

---

Now drag the bottom of the ListGroup back up to the guide
Copy the ListGroup and go back to the original Hype Doc.

DELETE the original ListGroup.

Past in the new ListGroup
Make sure it is inside the box group and then align its top to the guide and its sides to the scene.

---

That's all the UI stuff for the minute..

Now with the code I have edited it to be a little bit easier to work with.

The only change to the code you have to worry about ( not including the unctions and buttons not setup in the original )

Is the *initSongList function

I have created a Json object where you can add new songs.

The main important item to get right is the songIndex
This must be the same number that was entered into the ids for the UI elements.

music_group = list10
active group = active10
Play button= m10
number text = number10

---

Example

hypeDocument.customData.songList = [
    {
        "songIndex": 0,
        "name": "null",
        "singer": "null"
    },
    {
        "songIndex": 1,
        "name": "Go forward.",
        "singer": "Niu Niu"
    },
    {
        "songIndex": 2,
        "name": "Falling Slowly",
        "singer": "Nick Lachey"
    },
    {
        "songIndex": 3,
        "name": "Songs with Pride",
        "singer": "Smith"
    },
    {
        "songIndex": 4,
        "name": "Ruth's Legacy",
        "singer": "Mark Isham"
    },
    {
        "songIndex": 5,
        "name": "Wake Up",
        "singer": "Chelsea Cutler"
    },
    {
        "songIndex": 6,
        "name": "We Know The Way(海洋奇缘)",
        "singer": "Disney"
    },
    {
        "songIndex": 7,
        "name": "Paper Stars",
        "singer": "Massive"
    },
    {
        "songIndex": 8,
        "name": "Scotty",
        "singer": "Allan Taylor"
    },
    {
        "songIndex": 9,
        "name": "Captain America",
        "singer": "Alan Silvestri"
    }
    ,
    {
        "songIndex": 10,
        "name": "Captain America 2",
        "singer": "Alan Silvestri 2"
    }
]

The last bit of UI stuff: All the play buttons would have lost the actions.

Set new actions on ALL the play buttons On Mouse Down action to point to the MusicPlay() function.

---

***** --update: I forgot to add this bit in example:

Set ALL the 圆角矩形 rectangle On Mouse Down action to point to the continue timeline Next_playPage Action.

These elements are the

---

---

**** -

---

The play buttons id is used for the songIndex
The code deals with splitting the number from the rest of the id text.

--

The initSongList function is loaded on scene load.

That's it.

This example has all the relevant code edits.

iCloud Drive - Apple iCloud

[alastair]

Mark - this is amazing. You have explained it brilliantly. It's one thing putting up a template on a website but you have made it accessible to people like me who struggle with aspects of coding.

Thank you so much. This is what makes Hype such a wonderful platform.

I'll give it a go and let you know how I get on.

[MarkHunte]

Forgot this bit.

Set ALL the 圆角矩形 rectangle On Mouse Down action to point to the continue timeline Next_playPage Action.

These elements are the

---

---

**** -

[alastair]

I'm adding it to the play button on each song so that it goes straight from the list to the next page.

I am about to add a couple of lines of description to each piece and a graphic to the song list.

Then hopefully I can make each song will display a larger graphic and two lines of description on the second page.

I just hope I am not overloading it with too much content.

[alastair]

Mark
I'm trying to insert a picture for each song and a couple of lines of text on the second scene.
I thought I could do this by adding two more items to the song index - "blurb" and "pic" to give me a larger image of the artist on the second scene and some text but I'm not sure how to add them.

When I add them into the songindex it stops playing so I'm guessing I need to add to the MusicPlay javascript at the same time and that's where I'm getting out of my depth.
Can you advise?

Alastair

[MarkHunte]

Will have a look when I get back.

[MarkHunte]

Can you show me an example of where and what you are trying to insert.

[MarkHunte]

Taking a punt on what you mean

Which would be to get the play cover scene ( note I use the word scene loosely here as it is not actually a hype scene but sliding elements ) image to show a different image for each playing item alone with some text.

We simply add to each object in the json a pic property and a blurb property.

,
    {
        "songIndex": 1,
        "name": "Go forward.",
        "singer": "Niu Niu",
		"pic" :  "cover4.png",  
		"blurb": "Some blurb text"  
	},

Then in the MusicPlay() function,

We add these three lines as the first three line at the start of its function play(song)

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

;

We then need to need to give the cover image the class name. coverPic

And finally we need to add a new text element underneath the song title in the play cover scene.
And give that the class name of blurb

That should do it.

[alastair]

Yes - this is exactly what I was trying to do but made an error somewhere in the play(song) function then nothing would work!
Giving it a try today

[alastair]

I've changed the SongList like this:

hypeDocument.customData.songList = [
{
    "songIndex": 0,
    "name": "null",
    "singer": "null"
    "blurb": "null",
    "pic": "null",
},
{
    "songIndex": 1,
    "name": "Blue and Red Crayons",
    "singer": "Peter Logan",
    "blurb": "30-foot kinetic sculpture, 1991",
    "pic": "cover15.jpg",

[alastair]

added these lines to the MusicPLay function:

//This function is responsible for: responding to control the playback, pause and switching of music.
var num = element.id.split('m')[1]

var musicName = document.getElementById('musicName');
var musicSinger = document.getElementById('musicSinger');

var songList = hypeDocument.customData.songList
 
var audio = document.getElementById('myaudio');   //Get hidden audio control elements
 
			
play(songList[num])

function play(song){

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

[alastair]

[alastair]

[alastair]

Replaced the big graphic with a new one called CoverPic but now nothing works.
What have I done wrong ?

[MarkHunte]

Cant look at it right now.
But dont replace the big graphic. Do it as I said

[alastair]

I tried that first - exactly as you said, renaming the big cover image coverPic. Nothing plays.

[MarkHunte]

post you doc to me. you can PM it if you want