|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- const playerButton = document.querySelector('.player-button'),
- audio = document.querySelector('audio'),
- playIcon = `
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="rgb(255 255 255/var(--tw-bg-opacity))">
- <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
- </svg>
- `,
- pauseIcon = `
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="rgb(255 255 255/var(--tw-bg-opacity))">
- <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
- </svg>
-
- `;
-
- function toggleAudio() {
- if (audio.paused) {
- audio.play();
- playerButton.innerHTML = pauseIcon;
- } else {
- audio.pause();
- playerButton.innerHTML = playIcon;
- }
- }
-
- playerButton.addEventListener('click', toggleAudio);
-
- function audioEnded() {
- playerButton.innerHTML = playIcon;
- }
-
- audio.onended = audioEnded;
-
- const timeline = document.querySelector('.timeline');
-
- function changeTimelinePosition() {
- const percentagePosition = (100 * audio.currentTime) / audio.duration;
- timeline.style.backgroundSize = `${percentagePosition}% 100%`;
- timeline.value = percentagePosition;
- }
-
- audio.ontimeupdate = changeTimelinePosition;
-
- function changeSeek() {
- const time = (timeline.value * audio.duration) / 100;
- audio.currentTime = time;
- }
-
- timeline.addEventListener('change', changeSeek);
|