add audio visualizer to stream pages

pull/16/head
U-DESKTOP-3VIS1T9\junguler 2 years ago
parent e4b1192ff3
commit cf70f013f2

@ -4,6 +4,8 @@ this repo now has a [github page](https://junguler.github.io/m3u-radio-music-pla
### Listen to music online using this repo's github page
all of the streams can be listen to using their own page, just click on the one you want and hit the play button, click on the left and right arrow keys to change stations, this was made possible by using javascript code from [this page](https://www.draketo.de/software/m3u-player.html), thank you
i've also added a simple audio visualizer to the stream pages, code was taken from [this repo](https://github.com/wayou/audio-visualizer-with-controls), thank you
<div align="left">
| [60s](https://junguler.github.io/m3u-radio-music-playlists/stuff/60s.html) | [70s](https://junguler.github.io/m3u-radio-music-playlists/stuff/70s.html) | [80s](https://junguler.github.io/m3u-radio-music-playlists/stuff/80s.html) | [90s](https://junguler.github.io/m3u-radio-music-playlists/stuff/90s.html) | [acid_jazz](https://junguler.github.io/m3u-radio-music-playlists/stuff/acid_jazz.html) | [african](https://junguler.github.io/m3u-radio-music-playlists/stuff/african.html) | [alternative](https://junguler.github.io/m3u-radio-music-playlists/stuff/alternative.html) | [ambient](https://junguler.github.io/m3u-radio-music-playlists/stuff/ambient.html) |

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the 60s playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../60s.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the 60s playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../60s.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the 70s playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../70s.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the 70s playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../70s.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the 80s playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../80s.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the 80s playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../80s.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the 90s playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../90s.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the 90s playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../90s.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the acid_jazz playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../acid_jazz.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the acid_jazz playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../acid_jazz.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the african playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../african.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the african playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../african.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the alternative playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../alternative.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the alternative playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../alternative.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the ambient playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../ambient.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the ambient playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../ambient.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the americana playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../americana.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the americana playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../americana.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the anime playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../anime.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the anime playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../anime.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the arabic playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../arabic.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the arabic playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../arabic.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the asian playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../asian.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the asian playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../asian.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the big_band playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../big_band.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the big_band playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../big_band.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the bluegrass playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../bluegrass.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the bluegrass playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../bluegrass.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the blues playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../blues.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the blues playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../blues.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the breakbeat playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../breakbeat.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the breakbeat playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../breakbeat.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the chillout playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../chillout.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the chillout playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../chillout.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the christian playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../christian.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the christian playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../christian.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the classical playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../classical.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the classical playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../classical.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the club playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../club.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the club playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../club.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the college playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../college.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the college playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../college.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the comedy playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../comedy.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the comedy playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../comedy.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the country playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../country.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the country playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../country.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the dance playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../dance.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the dance playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../dance.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the deutsch playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../deutsch.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the deutsch playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../deutsch.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the disco playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../disco.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the disco playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../disco.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the discofox playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../discofox.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the discofox playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../discofox.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the downtempo playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../downtempo.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the downtempo playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../downtempo.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the drum_and_bass playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../drum_and_bass.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the drum_and_bass playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../drum_and_bass.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the easy_listening playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../easy_listening.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the easy_listening playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../easy_listening.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the ebm playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../ebm.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the ebm playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../ebm.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the electronic playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../electronic.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the electronic playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../electronic.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the eurodance playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../eurodance.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the eurodance playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../eurodance.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the film playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../film.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the film playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../film.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the folk playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../folk.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the folk playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../folk.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the france playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../france.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the france playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../france.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the funk playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../funk.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the funk playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../funk.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the goa playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../goa.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the goa playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../goa.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the gospel playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../gospel.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the gospel playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../gospel.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the gothic playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../gothic.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the gothic playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../gothic.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the greek playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../greek.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the greek playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../greek.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the hardcore playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../hardcore.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the hardcore playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../hardcore.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the hardrock playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../hardrock.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the hardrock playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../hardrock.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the hip_hop playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../hip_hop.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the hip_hop playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../hip_hop.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the house playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../house.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the house playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../house.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the india playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../india.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the india playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../india.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the indie playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../indie.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the indie playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../indie.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the industrial playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../industrial.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the industrial playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../industrial.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the instrumental playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../instrumental.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the instrumental playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../instrumental.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the italian playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../italian.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the italian playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../italian.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the jazz playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../jazz.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the jazz playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../jazz.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the jpop playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../jpop.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the jpop playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../jpop.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the jungle playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../jungle.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the jungle playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../jungle.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the latin playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../latin.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the latin playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../latin.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the lounge playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../lounge.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the lounge playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../lounge.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the metal playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../metal.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the metal playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../metal.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the mixed playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../mixed.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the mixed playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../mixed.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the musical playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../musical.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the musical playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../musical.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the oldies playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../oldies.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the oldies playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../oldies.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the opera playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../opera.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the opera playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../opera.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the polish playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../polish.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the polish playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../polish.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the polka playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../polka.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the polka playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../polka.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the pop playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../pop.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the pop playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../pop.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the portugal playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../portugal.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the portugal playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../portugal.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the progressive playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../progressive.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the progressive playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../progressive.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the punk playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../punk.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the punk playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../punk.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the quran playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../quran.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the quran playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../quran.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the rap playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../rap.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the rap playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../rap.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the reggae playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../reggae.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the reggae playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../reggae.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the retro playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../retro.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the retro playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../retro.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the rnb playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../rnb.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the rnb playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../rnb.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the rock playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../rock.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the rock playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../rock.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the romanian playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../romanian.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the romanian playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../romanian.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the russian playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../russian.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the russian playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../russian.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the salsa playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../salsa.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the salsa playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../salsa.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the schlager playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../schlager.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the schlager playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../schlager.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the ska playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../ska.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the ska playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../ska.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the smooth_jazz playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../smooth_jazz.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the smooth_jazz playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../smooth_jazz.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the soul playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../soul.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the soul playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../soul.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the soundtrack playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../soundtrack.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the soundtrack playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../soundtrack.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the spain playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../spain.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the spain playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../spain.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the spiritual playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../spiritual.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the spiritual playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../spiritual.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the sport playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../sport.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the sport playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../sport.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1,50 +1,35 @@
body {
background:#222;
color:#ccc;
}
.container{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
audio {
width: 600px;
}
.m3u-player--left, .m3u-player--right {
font-size: 200%;
appearance: none;
}
.m3u-player--left, .m3u-player--right {
cursor: pointer;
position: absolute;
top: 19px;
filter: invert(1);
}
.m3u-player--left {
margin-left: auto;
left: -44px;
}
.m3u-player--right {
margin-right: auto;
right: -44px;
}
.m3u-player--title {
margin: auto;
appearance: none;
padding-bottom: 6px;
}
button {
width: 40px;
}
body {
background:#222;
color:#ccc;
}
.container{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/* border: 2px solid white; */
}
audio {
width: 600px;
}
.m3u-player--left, .m3u-player--right {
appearance: none;
}
.m3u-player--left, .m3u-player--right {
cursor: pointer;
margin-left: auto;
/* filter: invert(1); */
}
.m3u-player--title {
margin: auto;
appearance: none;
width: 500px;
text-align: center;
}

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the swing playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../swing.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the swing playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../swing.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the symphonic playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../symphonic.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the symphonic playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../symphonic.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the talk playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../talk.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the talk playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../talk.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the techno playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../techno.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the techno playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../techno.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the top_40 playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../top_40.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the top_40 playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../top_40.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the trance playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../trance.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the trance playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../trance.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the turk playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../turk.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the turk playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../turk.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the urban playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../urban.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the urban playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../urban.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the usa playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../usa.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the usa playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../usa.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the various playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../various.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the various playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../various.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -0,0 +1,77 @@
/* *
* audio visualizer with html5 audio element
*
* v0.1.0
*
* licenced under the MIT license
*
* see my related repos:
* - HTML5_Audio_Visualizer https://github.com/wayou/HTML5_Audio_Visualizer
* - 3D_Audio_Spectrum_VIsualizer https://github.com/wayou/3D_Audio_Spectrum_VIsualizer
* - selected https://github.com/wayou/selected
* - MeowmeowPlayer https://github.com/wayou/MeowmeowPlayer
*
* reference: http://www.patrick-wied.at/blog/how-to-create-audio-visualizations-with-javascript-html
*/
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
var start = function() {
var audio = document.getElementById('audio');
var ctx = new AudioContext();
var analyser = ctx.createAnalyser();
var audioSrc = ctx.createMediaElementSource(audio);
// we have to connect the MediaElementSource with the analyser
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
// analyser.fftSize = 64;
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
// we're ready to receive some data!
var canvas = document.getElementById('canvas'),
cwidth = canvas.width,
cheight = canvas.height - 2,
meterWidth = 10, //width of the meters in the spectrum
gap = 2, //gap between meters
capHeight = 2,
capStyle = '#fff',
meterNum = 800 / (10 + 2), //count of the meters
capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
ctx = canvas.getContext('2d'),
gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
// loop
function renderFrame() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var step = Math.round(array.length / meterNum); //sample limited data from the total array
ctx.clearRect(0, 0, cwidth, cheight);
for (var i = 0; i < meterNum; i++) {
var value = array[i * step];
if (capYPositionArray.length < Math.round(meterNum)) {
capYPositionArray.push(value);
};
ctx.fillStyle = capStyle;
//draw the cap, with transition effect
if (value < capYPositionArray[i]) {
ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
} else {
ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
capYPositionArray[i] = value;
};
ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
}
requestAnimationFrame(renderFrame);
}
renderFrame();
// audio.play();
};
audio.onplay = function(){
start();
}

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the wave playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../wave.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the wave playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../wave.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

@ -1 +1 @@
<meta charset=utf-8><title>Listen to the world playlist</title><script src=./m3u-player.js defer></script><link href=./style.css rel=stylesheet><div class=container><audio src=../world.m3u controls></audio></div>
<html><meta charset=utf-8><html><head><title>Listen to the world playlist</title><link rel=stylesheet type=text/css href=style.css><script src=./m3u-player.js defer></script></head><body><div class=container><canvas id='canvas' width=600 height=260></canvas><audio src=../world.m3u id="audio" controls crossorigin></audio><script src=./visualizer.js></script></div></body></html>

Loading…
Cancel
Save