Audio playlist with javascript arrays

Using JavaScript with Hype
21

Ta for the PM.

There where some errors in your json.

You missed out a couple of commas. They are very important.

This is how it should be.

		
	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"


    },
    {
        "songIndex": 2,
        "name": "Benches",
        "singer": "Michael Harvey",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 3,
        "name": "West Bay",
        "singer": "Alex Lowery",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 4,
        "name": "The River Taw",
        "singer": "Susan Derges",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 5,
        "name": "Baby Portraits",
        "singer": "Gabriella Sancisi",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 6,
        "name": "Precious Scars",
        "singer": "Andy Kirkby",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 7,
        "name": "Pulpit Rock",
        "singer": "Emma Stibbon",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 8,
        "name": "The Knowledge",
        "singer": "Stephen Farthing",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 9,
        "name": "The Night Oaks",
        "singer": "George Wright",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    },
    {
        "songIndex": 10,
        "name": "Large Dog",
        "singer": "Elisabeth Frink",
        "blurb": "some blurb",
        "pic": "cover15.jpg"
    }
  

]

The other issue is you did not give the class names to the elements as I said and as my images showed.

Screenshot 2024-04-24 at 20.59.42
Screenshot 2024-04-24 at 20.59.422110×1238 403 KB

Screenshot 2024-04-24 at 20.59.34
Screenshot 2024-04-24 at 20.59.342086×1220 376 KB

Final thing, make sure the images exist in the project. there was no cover15.jpg in the PM project.

1 Like
22

Doh! Thank you for being so patient with me - really appreciated

1 Like
23

Mark - I've got 24 pieces of audio and graphics all inserted and it's working really well, but some are quite long and I'd like to be able to include +15 and -15 second buttons to rewind or skip forward.

Any thoughts on that?

I've only done it before with a much simpler player using Howl when I was just skipping or rewinding one sound.

24

Have your buttons point to something like

var currentScene = document.getElementById(hypeDocument.currentSceneId())
var audio = currentScene.querySelector(".myaudio");  //Get player elements
audio.currentTime += 15.0;

Or

var currentScene = document.getElementById(hypeDocument.currentSceneId())
var audio = currentScene.querySelector(".myaudio");  //Get player elements
 audio.currentTime -= 15.0;
1 Like
25

Thank you - I'll give it a go

26

All I needed was this to skip backwards and forwards and it works perfectly

var audio = document.getElementById('myaudio');
audio.currentTime -= 15.0;

or this to skip forward

var audio = document.getElementById('myaudio');
audio.currentTime += 15.0;

2 Likes