How to have sound ids before initializing howl

[kickthemooon]

So I get like 200 sounds from an api. The sounds also have some text attached to them. The audio texts are displayed on the screen.

Now I would like to able to, for example, highlight the text related to the sound when a sounds is playing. In order to do that I need to know the audio ids before playing them or before initializing howl so I can say something like..

id = 3 highlight text with id 3 sound.play(3)

I am wondering, why are the sound ids not simply array keys from the src array i pass into howl?

Hope i described my issue well enough.

[themoonrat]

You need to create your own 'Sound' class. It can have a play function, that calls the Howler play, and stores the id returned. Your class can then have additional functions to pause, emit events etc. rather than going through Howler.

[kickthemooon]

i need a way to know all the sound ids before using play() because i need to render html elements on the page with the same ids as the sound ids so i can highlight html elements at the same time i play the sound.

so lets say...

1. I get an array of sound urls from the api
2. Each sound has actually also a text to it
3. The audio urls I get from the api have unique ids
4. I render the texts on the screen having unique ids corresponding to the audio ids
5. When someone selects a text i need to play the sound corresponding to that text
6. But I dont know the id of sound in how, so i dont know which sound to play

so is there anyway to know all the sound ids before loading them into howl, example of that would be that the ids in howl are actually the keys of the srcs array i passed to howl, in that case I would know the ids before loading them into howl.

or maybe i misunderstood the idea behind howl, is the idea that 1 howl instace represents only one sound? and if i get like 200 sounds from my api i should make 200 instances of howl?

[ghost]

Idk if this is related to what you're asking but I ran into a similar problem trying to play sounds matching a button id so I did this:

let bird = {
    code : 'bird',
    Howl: new Howl({
        src: ['bird.mp3'],
    })
}

let water = new Howl({
    code : 'water',
    Howl: new Howl({
        src: ['water.mp3'],
    })
})

const sounds = [bird, water];

$(document).ready(function () {
    $('.sound').click(function () {
        let id = ($(this).attr('id'))
        sounds.filter(sound => (sound.code === id && sound.Howl.playing() === false)? sound.Howl.play() : sound.Howl.stop())
    })
})

html

<div>
        <button id="bird" class="btn btn-primary sound">
            BIRDS
        </button>
        <button  id="water" class="btn btn-primary sound">
            WATER
        </button>
</div>

About the instances I can't see how to make 1 to play multiple sounds. The library isn't written that way.