Created
May 4, 2024 05:04
-
-
Save guiseek/aef434b7d07d22f03af953d6478df272 to your computer and use it in GitHub Desktop.
Audio player vanila HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment