diff --git a/alternative.html b/alternative.html new file mode 100644 index 0000000..a465b96 --- /dev/null +++ b/alternative.html @@ -0,0 +1,40 @@ + + + + + alternative html5 playlist + + + + +
+

alternative approach

+

Just include one magical javascript, some audio tags and everything works as expected:

+

Anke

+ +

Metalik

+ +

Regenschori

+ +

(alternative version of severak/html5-playlist)

+

(original version)

+
+ + + diff --git a/auto-playlist.js b/auto-playlist.js new file mode 100644 index 0000000..6682d39 --- /dev/null +++ b/auto-playlist.js @@ -0,0 +1,25 @@ +// Automatic playlist for HTML5 audio tags. +// +// Based on code by lijnenspel posted on lines forum (https://llllllll.co/t/izzzzi-net-username-sharing/69588/239) + +pauseOthers = (e) => { + document.querySelectorAll("audio").forEach((a) => { + if (e.target != a) { + a.pause() + } + }) +} + +playNext = (e) => { + let allaudio = Array.from(document.querySelectorAll("audio")); + let nextid = allaudio.indexOf(e.target) + 1 + if(allaudio[nextid]){ + allaudio[nextid].play() + } +} + +document.querySelectorAll("audio") + .forEach((a) => { + a.addEventListener("play", pauseOthers) + a.addEventListener("ended", playNext) + }) diff --git a/index.html b/index.html index a26cdf3..c682206 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,7 @@

html5 playlist demo

(demo of severak/html5-playlist)

+

(also try alternative approach)