Closed hugolpz closed 8 years ago
I've been looking for some solutions online, and start testing out something.
Hello James, the following does work (locally), is scalable, and may be the a good start to achieve the upper cited function:
window.onload = function(e) {
// initialisation:
var onPlay = [false], // this one is useless now
pCount = 0;
playlistUrls = [
"./audio/cmn-ni3.mp3",
"./audio/cmn-hao3.mp3",
"./audio/cmn-lao3.mp3",
"./audio/cmn-mao3.mp3"
], // audio list
howlerBank = [],
loop = true;
// playing i+1 audio (= chaining audio files)
var onEnd = function(e) {
if (loop === true ) { pCount = (pCount + 1 !== howlerBank.length)? pCount + 1 : 0; }
else { pCount = pCount + 1; }
howlerBank[pCount].play();
};
// build up howlerBank:
playlistUrls.forEach(function(current, i) {
howlerBank.push(new Howl({ urls: [playlistUrls[i]], onend: onEnd, buffer: true }))
});
// initiate the whole :
howlerBank[0].play();
}
The jointure / transition between audios have too much silence, and I miss a perfect control over timing. But it does its job fully to chain audios well, and would allow easy playlist creation via howlerJS, which would be a cool and beloved feature.
This looks like a solution that could work well. Alternately you could preload all of your sounds upfront if you want to make sure there is no delay between each one. I'm going to go ahead and close this though as this type of feature is outside the scope of the library and is something that should be built around howler.js as you've done here.
Dear Goldfire, the main problem with Howler.JS is that the documentation is not comprehensive. The power and potential of Howler is lost in trying to stay as simple and clean as possible. For me, the basic starting point is precisely the music player idea, for which there are very few articles. To understand how to use holwer, it seemed like learning javascript, instead of easily being able to build a module based on your tool. Would you recommend any resources, examples, or source code that pushes Howler at a higher level, or would you consider expanding the examples of Howler in a comprehensive, real-life situation way? This post was hinting at that before it was closed.
As part of the 2.0 release I plan on creating a wider range of examples. Beyond examples, the docs have been improved in the 2.0 branch, but I'm happy to hear suggestions for areas of the documentation that could still be made more clear.
Goldfire! By the way, thank you for such a cool tool! I see Howler docs as being more than just an API type library. When I imagine examples in the docs, I imagine seeing code for how to make a library of audio tracks, another that has sounds/tracks with dedicated buttons (like a sampler), another showing playback controls. Sounds like a job for the Howler community, as these examples sort of veer into javascript instead of Howler's basics. But maybe you might already have some in the works to further spur development? Thank you for listening!
Thanks for the ideas, I've added this to the 2.0 milestone for docs.
This is now being tracked in https://github.com/goldfire/howler.js/issues/444, so I'm going to go ahead and close this.
Use recursive.
var list = [
'https://example.com/hello.mp3',
'https://example.com/world.mp3',
'https://example.com/music.mp3'
]
function autoplay(i, list) {
var sound = new Howl({
src: [list[i]],
preload: true,
onend: function () {
if ((i + 1) == list.length) {
autoplay(0, list)
} else {
autoplay(i + 1, list)
}
}
})
sound.play();
}
autoplay(0, list)
A variation adding the number of loops wanted for the playlist : https://jsfiddle.net/2syojed6/2/
Maybe I missed something, but I didn't found an easy way to play a list of audios as a playlist. A built-in way to play list of audio files would be helpful. When provided an array of urls corresponding to as many audio files, this function would play these files as a playlist [one at the end of an other] in the same order as the provided array of urls.
Current: For now, the current way I play a list of audios is a very dirty, not-scalable, hardcoded cascade of howler
play()
+onend: function(){ ... }
such:Such, for 3 files :