Contattaci Assistenza Clienti Azienda Infrastruttura Risorse Accedi
Registrati Prezzi Backup Cloud working Hosting Streaming Server



Come Personalizzare ed Installare il Player Streaming Audio sul Tuo Sito

Se vuoi creare un'esperienza unica per i tuoi ascoltatori, la personalizzazione del player streaming audio è fondamentale. Non solo migliora l'estetica del sito, ma permette di integrare funzionalità avanzate come la visualizzazione di metadati e controlli dinamici. In questa guida, ti mostreremo come farlo in pochi semplici passi, con la possibilità di richiedere assistenza se necessario.

 

1. Installazione del Player HTML5

Il primo passo è aggiungere un player audio di base, che richiede solo poche righe di codice HTML. È una soluzione rapida per iniziare a trasmettere la tua web radio in streaming:

Esempio minimo per incorporare l'elemento audio in una pagina web.


Codice dell'esempio 

<audio src="https://icecast.ithost.it/retesport.ogg" controls></audio>

Questo codice creerà un player HTML5 funzionale, pronto all'uso. È una soluzione veloce, adatta a chi cerca una configurazione semplice e immediata.

 

2. Stilizzazione attraverso CSS e Javascript

È anche possibile minimizzare il player così tanto da renderlo solo un bottone


Codice dell'esempio 

<style>
.audio-player2 {
  --player-button-width: 3em;
  --sound-button-width: 2em;
  --space: .5em;
  width: 15rem;
  height: 3rem;
  /*background-color: #00f;*/
}
.controls2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  /*margin-top: 10px;*/
}
.player-button2 {
  background-color: transparent;
  border: 0;
  width: var(--player-button-width);
  height: var(--player-button-width);
  cursor: pointer;
  padding: 0;
}
</style>
<div class="audio-player2">
  <audio class="audio2" src="https://icecast.ithost.it/retesport.ogg"></audio>
  <div class="controls2">
    <button class="player-button2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
      </svg>
    </button>
    <!--p>Ascolta la Web radio retesport.ogg</p-->
  </div>
</div>
<script>
  const playerButton = document.querySelector('.player-button2'),
        audio = document.querySelector('.audio2'),
        timeline = document.querySelector('.timeline'),
        playIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" /></svg>`,
        pauseIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>`;
  function toggleAudio () {
      if (audio.paused) {
          audio.play();
          playerButton.innerHTML = pauseIcon;
      } else {
          audio.pause();
          playerButton.innerHTML = playIcon;
      }
  }
  playerButton.addEventListener('click', toggleAudio);
  function audioEnded () {
      playerButton.innerHTML = playIcon;
  }
  audio.onended = audioEnded;
</script>

Questo codice creerà un player HTML5 Bottone, pronto all'uso, soluzione ottimale per grafiche minimal.

 

3. Personalizzazione del Player Audio

Per rendere il tuo player più professionale e in linea con il design del sito, puoi personalizzare il layout e lo stile. Ecco alcuni esempi di personalizzazione:

  • Aggiungere copertina dell'album e metadati come titolo e artista.
  • Modificare colori e layout con il CSS per un player che si adatti perfettamente al tuo brand.

Ad esempio, puoi visualizzare la copertina della traccia:


Codice dell'esempio 

<style>
.audio-player3 {
  --player-button-width: 3em;
  --sound-button-width: 2em;
  --space: .5em;
  width: 15rem;
  height: 5rem;
}
.audio-icon {
   width: 90%;
   height: 90%;
}
.controls3 {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.player-button3 {
  background-color: transparent;
  border: 0;
  width: var(--player-button-width);
  height: var(--player-button-width);
  cursor: pointer;
  padding: 0;
}
.timeline3 {
  -webkit-appearance: none;
  width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
  height: .5em;
  background-color: #e5e5e5;
  border-radius: 5px;
  background-size: 0% 100%;
  background-image: linear-gradient(#F2BA01, #F2BA01);
  background-repeat: no-repeat;
  margin-right: var(--space);
}
.timeline3::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #826E30;
}
.timeline3::-moz-range-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #826E30;
}

.timeline3::-ms-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #826E30;
}

.timeline3::-webkit-slider-thumb:hover {
  background-color: #826E30;
}

.timeline3:hover::-webkit-slider-thumb {
  opacity: 1;
}

.timeline3::-moz-range-thumb:hover {
  background-color: #826E30;
}

.timeline3:hover::-moz-range-thumb {
  opacity: 1;
}

.timeline3::-ms-thumb:hover {
  background-color: #826E30;
}

.timeline3:hover::-ms-thumb {
  opacity: 1;
}

.timeline3::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.timeline3::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.timeline3::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.sound-button3 {
  background-color: transparent;
  border: 0;
  width: var(--sound-button-width);
  height: var(--sound-button-width);
  cursor: pointer;
  padding: 0;
}
</style>
<div class="audio-player3">
 <audio class="audio3" src="https://icecast.ithost.it/retesport.ogg"></audio>
  <div class="controls3">
    <button class="player-button3">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
      </svg>
    </button>
    <input type="range" class="timeline3" max="100" value="0">
    <button class="sound-button3">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
          <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
        </svg>
    </button>
  </div>
</div>
<script>
const playerButton3 = document.querySelector('.player-button3'),
      audio3 = document.querySelector('.audio3'),
      timeline3 = document.querySelector('.timeline3'),
      soundButton3 = document.querySelector('.sound-button3'),
      playIcon3 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" /></svg>`,
      pauseIcon3 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>`,
      soundIcon3 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" /></svg>`,
      muteIcon3 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>`;
function toggleAudio3 () {
    if (audio3.paused) {
        audio3.play();
        playerButton3.innerHTML = pauseIcon3;
    } else {
        audio3.pause();
        playerButton3.innerHTML = playIcon3;
    }
}

playerButton3.addEventListener('click', toggleAudio3);
function changeTimelinePosition3 () {
    const percentagePosition = (100*audio3.currentTime) / audio3.duration;
    timeline3.style.backgroundSize = `${percentagePosition}% 100%`;
    timeline3.value = percentagePosition;
}
audio3.ontimeupdate = changeTimelinePosition3;
function audioEnded3 () {
    playerButton3.innerHTML = playIcon;
}
audio3.onended = audioEnded3;
function changeSeek3 () {
    const time = (timeline3.value * audio3.duration) / 100;
    audio3.currentTime = time;
}
timeline3.addEventListener('change', changeSeek3);
function toggleSound3 () {
    audio3.muted = !audio3.muted;
    soundButton3.innerHTML = audio3.muted ? muteIcon3 : soundIcon3;
}
soundButton3.addEventListener('click', toggleSound3);
</script>





Codice dell'esempio 

<style>
.audio-player4 {
  --player-button-width: 3em;
  --sound-button-width: 2em;
  --space: .5em;
  width: 15rem;
  height: 15rem;
}

.icon-container {
  width: 100%;
  height: 100%;
  background-color: #F2BA01;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.audio-icon {
   width: 90%;
   height: 90%;
}

.controls4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}

.player-button4 {
  background-color: transparent;
  border: 0;
  width: var(--player-button-width);
  height: var(--player-button-width);
  cursor: pointer;
  padding: 0;
}

.timeline4 {
  -webkit-appearance: none;
  width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
  height: .5em;
  background-color: #e5e5e5;
  border-radius: 5px;
  background-size: 0% 100%;
  background-image: linear-gradient(#F2BA01, #F2BA01);
  background-repeat: no-repeat;
  margin-right: var(--space);
}

.timeline4::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #826E30;
}

.timeline4::-moz-range-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #826E30;
}

.timeline4::-ms-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #826E30;
}

.timeline4::-webkit-slider-thumb:hover {
  background-color: #826E30;
}

.timeline4:hover::-webkit-slider-thumb {
  opacity: 1;
}

.timeline4::-moz-range-thumb:hover {
  background-color: #826E30;
}

.timeline4:hover::-moz-range-thumb {
  opacity: 1;
}

.timeline4::-ms-thumb:hover {
  background-color: #826E30;
}

.timeline4:hover::-ms-thumb {
  opacity: 1;
}

.timeline4::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.timeline4::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.timeline4::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.sound-button4 {
  background-color: transparent;
  border: 0;
  width: var(--sound-button-width);
  height: var(--sound-button-width);
  cursor: pointer;
  padding: 0;
}
</style>
<div class="audio-player4">
  <div class="icon-container">
    <img src="logo.jpg" width="100%">
  </div>
  <audio class="audio4" src="https://icecast.ithost.it/retesport.ogg"></audio>
  <div class="controls4">
    <button class="player-button4">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
      </svg>
    </button>
    <input type="range" class="timeline4" max="100" value="0">
    <button class="sound-button4">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132">
          <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
        </svg>
    </button>
  </div>
</div>
<script>
const playerButton4 = document.querySelector('.player-button4'),
      audio4 = document.querySelector('.audio4'),
      timeline4 = document.querySelector('.timeline4'),
      soundButton4 = document.querySelector('.sound-button4'),
      playIcon4 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" /></svg>`,
      pauseIcon4 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>`,
      soundIcon4 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" /></svg>`,
      muteIcon4 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#3D3132"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM12.293 7.293a1 1 0 011.414 0L15 8.586l1.293-1.293a1 1 0 111.414 1.414L16.414 10l1.293 1.293a1 1 0 01-1.414 1.414L15 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L13.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>`;
function toggleAudio4 () {
    if (audio4.paused) {
        audio4.play();
        playerButton4.innerHTML = pauseIcon4;
    } else {
        audio4.pause();
        playerButton4.innerHTML = playIcon4;
    }
}
playerButton4.addEventListener('click', toggleAudio4);
function changeTimelinePosition4 () {
    const percentagePosition = (100*audio4.currentTime) / audio4.duration;
    timeline4.style.backgroundSize = `${percentagePosition}% 100%`;
    timeline4.value = percentagePosition;
}
audio4.ontimeupdate = changeTimelinePosition4;
function audioEnded () {
    playerButton4.innerHTML = playIcon4;
}
audio4.onended = audioEnded;
function changeSeek () {
    const time = (timeline4.value * audio4.duration) / 100;
    audio4.currentTime = time;
}
timeline4.addEventListener('change', changeSeek);
function toggleSound () {
    audio4.muted = !audio4.muted;
    soundButton4.innerHTML = audio4.muted ? muteIcon4 : soundIcon4;
}
soundButton4.addEventListener('click', toggleSound);    
</script>

 

Aggiunta di Funzionalità Avanzate

Se vuoi fare un passo in più, puoi anche includere metadati come il titolo della canzone e l’artista, o persino integrare il player con librerie come Howler.js o jPlayer, che ti permettono di aggiungere funzionalità avanzate come la gestione del volume e l’autoplay.

 

Supporto Tecnico e Assistenza

Personalizzare il player per lo streaming audio non è mai stato così facile! Se preferisci, puoi seguire le nostre guide dettagliate e gli esempi forniti per ottenere risultati rapidi e senza complicazioni.

Se hai difficoltà o vuoi un risultato professionale, il nostro team è sempre disponibile per offrirti assistenza. Possiamo guidarti passo passo o occuparci direttamente della personalizzazione e installazione del player per te.