<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PLAY5 Audio Player con Sottotitoli</title>
<style>
/* Stili per il player */
#player {
width: 600px;
margin: auto;
background: #000;
padding: 10px;
border-radius: 5px;
}
audio {
width: 100%;
border-radius: 5px;
}
.controls {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
button {
background-color: #444;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #666;
}
</style>
</head>
<body>
<div id="player">
<audio id="audio" controls>
<source src="https://escucha.calima.fm/stream" type="audio/mpeg">
<track kind="subtitles" src="sottotitoli.vtt" srclang="it" label="Italiano" default>
Il tuo browser non supporta l'elemento audio
</audio>
<div class="controls">
<button id="playBtn">Play</button>
<button id="pauseBtn">Pause</button>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
</div>
</div>
<script>
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const volumeControl = document.getElementById('volumeControl');
playBtn.addEventListener('click', () => {
audio.play();
});
pauseBtn.addEventListener('click', () => {
audio.pause();
});
volumeControl.addEventListener('input', (event) => {
audio.volume = event.target.value;
});
</script>
</body>
</html>