Tutorial : Animated background and audio stream

Tutorial

How to create a page with an animated background and an audio stream ?

+animated background.

+audio from a stream.

http://allzic20.ice.infomaniak.ch/allzic20.mp3

Source code :

<!DOCTYPE html><html><head><title>Water | Rbcafe</title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/><style type="text/css">html,body{margin:0;padding:0;border:0;height:100%;width:100%}#water{background:url(water.gif) no-repeat center center fixed;width:100vw;height:100vh;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}audio {width:20px;display:block;margin:5px;position:absolute;bottom:0;right:0}</style></head><body><div id="water"></div><audio autoplay controls><source src="https://allzic20.ice.infomaniak.ch/allzic20.mp3" type="audio/mpeg"></audio></div></body></html>

Steps :

  • Found a gif, in this case : giphy.com/gifs/landscape-pixel-art-backgrounds-147dhpS014bAaY
  • Found a stream using radio.net
  • Copy the content of the html in an index.html

Final result :

Leave a Comment