mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
2.5 KiB
HTML
51 lines
2.5 KiB
HTML
11 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Music Player</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="flex items-center justify-center min-h-screen bg-gray-900">
|
||
|
|
<div class="bg-gray-800 p-6 rounded-lg shadow-lg text-white w-full max-w-md space-y-4">
|
||
|
|
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
|
||
|
|
<button id="playButton"
|
||
|
|
class="w-full py-2 px-4 bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-300 ease-in-out transform active:scale-95 flex items-center justify-center space-x-2">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||
|
|
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
|
|
</svg>
|
||
|
|
<span>Play</span>
|
||
|
|
</button>
|
||
|
|
<progress id="progressBar" value="0" max="1" class="w-full h-2 bg-gray-700 rounded-full overflow-hidden">
|
||
|
|
<div class="h-full bg-green-500 rounded-full"></div>
|
||
|
|
</progress>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const player = document.getElementById('player');
|
||
|
|
const playButton = document.getElementById('playButton');
|
||
|
|
const progressBar = document.getElementById('progressBar');
|
||
|
|
|
||
|
|
playButton.addEventListener('click', () => {
|
||
|
|
if (player.paused) {
|
||
|
|
player.play();
|
||
|
|
playButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span>Pause</span>';
|
||
|
|
} else {
|
||
|
|
player.pause();
|
||
|
|
playButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.26a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/></svg><span>Play</span>';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
player.addEventListener('timeupdate', () => {
|
||
|
|
console.log(player.currentTime, player.duration);
|
||
|
|
progressBar.value = player.currentTime / player.duration;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|