Beispiel:Audio-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Audio Player - selbstgemacht</title>
<style>

#audio-player {
    width: 15em;
		aspect-ratio: 1 / 1;
    margin: 2em auto;
		display: grid; position: relative;

		#background {
			fill: none;
			stroke: silver;
			stroke-width: 3;
		}
		#duration {
			fill: none;
			stroke: steelBlue;
			stroke-width: 3;
			rotate: -0.25turn;
		}		
		[for="play-pause-icon"] {
			color: transparent;
		}
		
		#play-pause-icon {
    width: 5em;
		aspect-ratio: 1 / 1;
		place-self: center;
		position: absolute;	
		border: none;	
		transition: all 1s;
		}
		#play-pause-icon:hover {
			filter: brightness(1.1);
			scale: 1.1;
		}
		[aria-pressed=false] {
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M35,10 l90,70 -90,70z' style='fill:%23c82f04;stroke:%23c82f04; stroke-width:19;stroke-linejoin:round;'/%3E%3C/svg%3E");
		}
		[aria-pressed=true] {
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Crect x='25' y='0' width='45' height='160' rx='10' style='fill:%23c82f04;'/%3E%3Crect x='90' y='0' width='45' height='160' rx='10' style='fill:%23c82f04;'/%3E%3C/svg%3E");
		}
		p {margin-bottom: 0;}
}



body {
	max-width: 55em;
	margin: 0 auto;
}
</style>
</head>
<body><h1>Audio Player - selbstgemacht</h1>
<audio id="audio_with_controls" 
		controls
		src="https://wiki.selfhtml.org/local/Europahymne.mp3" 
		type="audio/mp3" 
>
		Ihr Browser kann dieses Tondokument nicht wiedergeben.<br>
		Es enthält eine Aufführung der Europahymne. 
		Sie können es unter
		<a href="https://wiki.selfhtml.org/local/Europahymne.mp3">diesem Link</a>
		abrufen.
</audio>
      
<script>
document.addEventListener('DOMContentLoaded', function () {
    const audio = document.querySelector('audio');

    function formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
    }

    function createPlayer() {
        // Entferne die nativen Audio-Controls
        audio.removeAttribute('controls');
        
        // Füge den benutzerdefinierten Player hinzu
        audio.insertAdjacentHTML('afterend', `
            <div id="audio-player">
                <svg viewBox="-49 -49 99 99">
                    <circle r="45" id="background"/>
                    <circle r="45" id="duration" style="stroke-dasharray: 282; stroke-dashoffset: 282;"/>
                </svg>
                <label for="play-pause-icon">Audio Player</label>
                <button id="play-pause-icon" aria-label="Play audio" aria-pressed="false"></button>
                <p>
                    <span id="current-time" class="time">0:00</span> / 
                    <span id="duration-time" class="time">0:00</span>
                </p>
            </div>
        `);

        // Eventlistener für den Play/Pause-Button
        const playPauseButton = document.querySelector('#play-pause-icon');
        const durationCircle = document.querySelector('#duration');
        const currentTimeDisplay = document.querySelector('#current-time');
        const durationTimeDisplay = document.querySelector('#duration-time');
        const circleLength = 2 * Math.PI * parseFloat(durationCircle.getAttribute('r'));
        durationCircle.style.strokeDasharray = circleLength;
        durationCircle.style.strokeDashoffset = circleLength;

        playPauseButton.addEventListener('click', function () {
            const isPlaying = playPauseButton.getAttribute('aria-pressed') === 'true';

            if (!isPlaying) {
                // Start audio playback
                audio.play();
                playPauseButton.setAttribute('aria-pressed', 'true');
                playPauseButton.setAttribute('aria-label', 'Pause audio');
            } else {
                // Pause audio playback
                audio.pause();
                playPauseButton.setAttribute('aria-pressed', 'false');
                playPauseButton.setAttribute('aria-label', 'Play audio');
            }
        });

        // Set the duration time when metadata is loaded
        audio.addEventListener('loadedmetadata', function () {
            if (audio.duration) {
                durationTimeDisplay.textContent = formatTime(audio.duration);
            }
        });

        // Update progress of the audio playback
        audio.addEventListener('timeupdate', function () {
            if (audio.duration) {
                const progress = audio.currentTime / audio.duration;
                const dashOffset = circleLength * (1 - progress);
                durationCircle.style.strokeDashoffset = dashOffset;

                // Update current time display
                currentTimeDisplay.textContent = formatTime(audio.currentTime);
            }
        });

        // Reset the progress when the audio ends
        audio.addEventListener('ended', function () {
            durationCircle.style.strokeDashoffset = circleLength;
            playPauseButton.setAttribute('aria-pressed', 'false');
            playPauseButton.setAttribute('aria-label', 'Play audio');
            currentTimeDisplay.textContent = '0:00';
        });
    }

    createPlayer();
});

</script>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Audio-3.html&oldid=100302“