<!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>