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.

22

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

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;
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;