Bonita radio para el navegador.

Caminando por Internet, me topé con un desarrollo bastante interesante. Se llama "Reproductor de radio ruso". El usuario elige una estación para escuchar, escucha música y hermosas imágenes se reemplazan entre sí en la pantalla. Me gustó mucho la apariencia, pero como prefiero el tema espacial, decidí rehacer este reproductor para mí. Lea lo que salió de todo esto en esta publicación.

Que fue y que se convirtió

El desarrollo se encuentra aquí y se ve así:

Como puede ver, hay pocas estaciones. También hay pocas imágenes y todas están en la nube amazónica. Decidí colocar las imágenes localmente y agregar más estaciones. Esto es lo que sucedió:

Mi versión está aquí .

Alteraciones

Nueva lista de emisoras

stations 15- :

var stations = [
  {
    "title": " ",
    "stream": "http://air.volna.top/Retro"
  },
  {
    "title": " ",
    "stream": "http://78.111.244.206/euro32.mp3"
  },
  {
    "title": "NonStopPlay",
    "stream": "http://stream.nonstopplay.co.uk/nsp-128k-mp3"
  },
  {
    "title": "Radio Record",
    "stream": "http://air.radiorecord.ru:8101/rr_320"
  },
  {
    "title": "Jazz FM Legends",
    "stream": "http://jazz128legends.streamr.ru/"
  },
  {
    "title": "Trancemission",
    "stream": "http://air.radiorecord.ru:8102/tm_320"
  },
  {
    "title": " 90-",
    "stream": "http://air.radiorecord.ru:8102/sd90_320 "
  },
  {
    "title": "Joy Radio",
    "stream": "http://airtime.joyradio.cc:8000/airtime_192.mp3"
  },
  {
    "title": "Fip Radio",
    "stream": "http://direct.fipradio.fr/live/fip-midfi.mp3"
  },
  {
    "title": "Dubstep",
    "stream": "http://air.radiorecord.ru:8102/dub_320"
  },
  {
    "title": " FM",
    "stream": "http://icecast.stranafm.cdnvideo.ru/stranafm_128"
  },
  {
    "title": "Music Radio",
    "stream": "http://ice-the.musicradio.com/CapitalXTRANationalMP3"
  },
  {
    "title": "Classical Music",
    "stream": "http://stream.srg-ssr.ch/m/rsc_de/mp3_128"
  },
  {
    "title": "Live Icy",
    "stream": "http://live-icy.gss.dr.dk:8000/A/A05H.mp3"
  },
  {
    "title": " ",
    "stream": "http://195.91.237.50:8000/music32"
  }
];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. overflow-y: scroll



:

.stations {
  height: 100vh;
  background-color: #262831;
  box-shadow: 0 0 15px #262831;
  z-index: 100;
  overflow-y: scroll;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"" . ? .

backgrounds 14- :

var backgrounds = [
  'images/1.jpg',
  'images/2.jpg',
  'images/3.jpg',
  'images/4.jpg',
  'images/5.jpg',
  'images/6.jpg',
  'images/7.jpg',
  'images/8.jpg',
  'images/9.jpg',
  'images/10.jpg',
  'images/11.jpg',
  'images/12.jpg',
  'images/13.jpg',
  'images/14.jpg'
];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Pixabay. , , galaxy.png, . , , . :

   <div class="logo">
      <svg id="bear" viewBox="-8 -10 90 95"><path id="head" d="m76.6 41.34-10.629-32.47 5.211-5.637v-9.478l-9.478-3.755-7.927 6.348-18.063 2.951-17.716-2.921-8.163-6.377-9.478 3.04v10.193l5.172 5.859-10.443 32.261-0.883 2.727 2.182 1.86 36.598 31.194 2.779 2.366 2.782-2.361 36.754-31.193 2.199-1.866-0.897-2.741zm-40.833 29.489-36.598-28.154 13.303-41.092l23.242-0.405 23.353 0.401 13.453 41.096-36.753 28.154z"/><polygon id="left-eye" points="29.359 41.058 28.957 36.677 40.67 39.494 38.345 43.606 32.4 44.429" transform="translate(-14.15 -15.249)"/><polygon id="right-eye" points="70.082 41.058 70.484 36.677 58.771 39.494 61.096 43.606 67.15 44.429" transform="translate(-14.15 -15.249)"/><polygon id="snout" points="58.771 39.494 58.771 39.494 60.297 58.059 62.753 69.227 49.92 77.195 37.239 69.227 39.521 57.949 40.67 39.494 40.67 39.494 40.938 58.108 38.826 68.592 49.925 74.611 61.148 68.595 58.883 58.243" transform="translate(-14.15 -15.249)"/><polygon id="nose" points="44.171 67.748 46.364 61.875 53.471 61.875 55.664 67.748 49.922 70.923" transform="translate(-14.15 -15.249)"/></svg>
    </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

<div class="logo">
    <img id="galaxy" src="images/galaxy.png">
    </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

? , favicon



:

station.favicon = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/194122/bear-paw.png';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

station.favicon = 'images/galaxy.png';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . , , . !