Create Audio playlist with Howler.js

Using JavaScript with Hype
1

A happy new year everyone,

I would like to create a various audio playlist (see pic) with Hype and I would like to use Howler.js for this. My main goal is to unload the audio when playing a new one (see this link)

Hans-Gerd Claßen's howler.js template is great way to start

The links for all files here
Thanks in advance,

2

found this one: Multitrack sound and mute button - audio - Tumult Forums

it shows how to manage instances of the howler-sound-objects ... should give you a go ...

1 Like
3

This is great example, thank you. However I would like to play one audio at a time meaning "stop all sound when playing a new sound" (overlapping audio not allowed). Perhaps something like this

function newSong(url) {
if (sound != null) {
sound.stop();
sound.unload();
sound = null;
}
sound = new Howl({
src: [url]
});
sound.play();
}

4

The example is about how to handle instances .... you'd need that ..

please get in touch with howlers documentation to adapt it to your needs ...
you'll need some basic js-skills if you like to use a js-library

1 Like
5

thanks

6

if i remember it right @Raleigh has done a project using Howler. perhaps he is willing to share his insights with you¿ :slight_smile:

2 Likes
7

Thanks @h_classen,
Replied via private message!
rg

2 Likes
8

It's basic but I just used the same code for each of my sounds to pause the other sounds and then play. Works fine.

function sound3play(hypeDocument, element, event) {
sound1.pause()
sound2.pause()
sound4.pause()
sound5.pause()
sound6.pause()
sound13.pause()

return sound3.playing() ? sound3.pause() : sound3.play();
}

There's probably a neater way of doing it as this gives me a function for each sound to play the sound and pause the others. It makes it very easy to change the sounds as I just have a list naming each as variable in the head html:

           <script>	var sound7 = new Howl({
src: ['${resourcesFolderName}/Willow.mp3']
 });</script>

Then I added two functions to rewind or skip forward 15 seconds for the current sound playing. I also made sure none of the audio was preloading. With a lot of audio that can crash the browser.

1 Like
10

It is probably not a good idea to post ChatGPT answers before you have tested they work as expected.
They often do not on first iterations and its answers give the impression they are correct way of doing things.

3 Likes
11

@faruk I think I agree with Mark here -- please give this a test and feel free to repost a Hype document if it works as you expect so it can help others accomplish their goals with Howler in Hype.

1 Like
12

I would like to apologize for my previous post where I shared a solution without first attempting to implement it myself.

1 Like
13

I used to create an example of such a player, but basically I did it to listen to my favorite radio
http://intaplink.ru/player/