guiseek/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/ts.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      fieldset {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <legend id="currentTitle"></legend>
      <audio
        id="audio"
        src="Ozzy Osbourne - I Jast Want You.mp3"
        onloadedmetadata="
          totalTime.textContent = new Date((audio.duration ?? 0) * 1000).toISOString().slice(11, 19);
        "
        ontimeupdate="
          slider.max = audio.duration;
          slider.value = audio.currentTime;
          currentTimes.textContent = new Date(audio.currentTime * 1000).toISOString().slice(11, 19)
        "
      ></audio>
      <menu>
        <button onclick="playlist.value = playlist.options[playlist.selectedIndex == 0 ? playlist.options.length - 1 : playlist.selectedIndex - 1].value; playlist.dispatchEvent(new Event('change'))">Prev</button>
        <button
          onclick="audio.paused ? audio.play() : audio.pause(); this.textContent = audio.paused ? 'Play' : 'Pause';"
        >
          Play
        </button>
        <button onclick="playlist.value = playlist.options[playlist.selectedIndex < playlist.options.length - 1 ? playlist.selectedIndex + 1 : 0].value; playlist.dispatchEvent(new Event('change'))">Next</button>

      </menu>
      <p>
        <output id="currentTimes">00:00:00</output>
        <output id="totalTime">00:00:00</output>

        <input
          type="range"
          min="0"
          max="1"
          step="0.1"
          value="1"
          id="volume"
          oninput="audio.volume = this.value"
        />
      </p>
      <input
        id="slider"
        type="range"
        min="0"
        value="0"
        oninput="audio.currentTime = this.value"
      />
      <select
        name="playlist"
        id="playlist"
        multiple
        onchange="audio.src = this.value; audio.play(); currentTitle.textContent = this.value.replace('.mp3', '')"
      >
        <option value="Ozzy Osbourne - I Jast Want You.mp3">
          Ozzy Osbourne - I Jast Want You
        </option>
        <option value="Ozzy Osbourne - Perry Mason.mp3">
          Ozzy Osbourne - Perry Mason
        </option>
      </select>
    </fieldset>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/svg+xml" href="/ts.svg" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Vite + TS</title>
	<style>
	body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	}
	fieldset {
	display: flex;
	flex-direction: column;
	}
	</style>
	</head>
	<body>
	<fieldset>
	<legend id="currentTitle"></legend>
	<audio
	id="audio"
	src="Ozzy Osbourne - I Jast Want You.mp3"
	onloadedmetadata="
	totalTime.textContent = new Date((audio.duration ?? 0) * 1000).toISOString().slice(11, 19);
	"
	ontimeupdate="
	slider.max = audio.duration;
	slider.value = audio.currentTime;
	currentTimes.textContent = new Date(audio.currentTime * 1000).toISOString().slice(11, 19)
	"
	></audio>
	<menu>
	<button onclick="playlist.value = playlist.options[playlist.selectedIndex == 0 ? playlist.options.length - 1 : playlist.selectedIndex - 1].value; playlist.dispatchEvent(new Event('change'))">Prev</button>
	<button
	onclick="audio.paused ? audio.play() : audio.pause(); this.textContent = audio.paused ? 'Play' : 'Pause';"
	>
	Play
	</button>
	<button onclick="playlist.value = playlist.options[playlist.selectedIndex < playlist.options.length - 1 ? playlist.selectedIndex + 1 : 0].value; playlist.dispatchEvent(new Event('change'))">Next</button>

	</menu>
	<p>
	<output id="currentTimes">00:00:00</output>
	<output id="totalTime">00:00:00</output>

	<input
	type="range"
	min="0"
	max="1"
	step="0.1"
	value="1"
	id="volume"
	oninput="audio.volume = this.value"
	/>
	</p>
	<input
	id="slider"
	type="range"
	min="0"
	value="0"
	oninput="audio.currentTime = this.value"
	/>
	<select
	name="playlist"
	id="playlist"
	multiple
	onchange="audio.src = this.value; audio.play(); currentTitle.textContent = this.value.replace('.mp3', '')"
	>
	<option value="Ozzy Osbourne - I Jast Want You.mp3">
	Ozzy Osbourne - I Jast Want You
	</option>
	<option value="Ozzy Osbourne - Perry Mason.mp3">
	Ozzy Osbourne - Perry Mason
	</option>
	</select>
	</fieldset>
	</body>
	</html>