Beispiel:Audio-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<title>Playlisten und mehr</title>
<style>
#audio-player {
width: 15em;
margin: 2em auto;
#display {
aspect-ratio: 1 / 1;
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],#next {
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:%23c60b0b;stroke:%23c60b0b; 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:%23c60b0b;'/%3E%3Crect x='90' y='0' width='45' height='160' rx='10' style='fill:%23c60b0b;'/%3E%3C/svg%3E");
}
p {margin-bottom: 0;}
#controls {
button {display:inline-block; width: 2em; aspect-ratio: 1 / 1;border: none; transition: all 1s;}
#back {scale: -1 1;}
p {display:inline-block; width: calc(100% - 4em);}
}
}
body {
max-width: 55em;
margin: 0 auto;
}
</style>
</head>
<body><h1>Playlisten und mehr - <span style="color:#c60b0b">noch ohne Funktion!</span></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>
<ul class="playlist">
<li><a href="https://upload.wikimedia.org/wikipedia/commons/6/62/Pachelbel%27s_Canon.ogg">Kanon in D-Dur, Pachelbel</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/c/c2/Toccata_and_Fugue_in_D_Minor_%28ISRC_USUAN1100350%29.mp3">Toccata und Fuge in D-Moll, Bach</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/2/24/Mozart_-_Eine_kleine_Nachtmusik_-_1._Allegro.ogg">Eine kleine Nachtmusik, Mozart</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/9/9d/Daniel_Bautista_-_Beethoven_-_Para_Elisa.ogg">Für Elise, Beethoven</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/f/fa/Vivaldi_-_Four_Seasons_2_Summer_mvt_3_Presto_-_John_Harrison_violin.oga">Vier Jahreszeiten Sommer, Vivaldi</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/e/e2/Mozart%2C_The_Marriage_of_Figaro_%28overture%29.ogg">Hochzeit des Figaro - Overtüre, Mozart</a></li>
<li><a href="https://upload.wikimedia.org/wikipedia/commons/e/ec/Korobeiniki-wansti-tobefree.mp3">Korobeiniki, Nikolai Alexejewitsch Nekrassow (1821 - 1878) </a></li>
</ul>
<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() {
audio.removeAttribute('controls');
audio.insertAdjacentHTML('afterend', `
<div id="audio-player">
<div id="display">
<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>
<div id="controls"><button id="back" aria-label="gehe zum vorherigen Titel" aria-pressed="false"></button>
<p id="titel">Titel</p>
<button id="next" aria-label="gehe zum nächsten Titel" aria-pressed="false"></button>
</div>
</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');
}
});
audio.addEventListener('loadedmetadata', function () {
if (audio.duration) {
durationTimeDisplay.textContent = formatTime(audio.duration);
}
});
audio.addEventListener('timeupdate', function () {
if (audio.duration) {
const progress = audio.currentTime / audio.duration;
const dashOffset = circleLength * (1 - progress);
durationCircle.style.strokeDashoffset = dashOffset;
currentTimeDisplay.textContent = formatTime(audio.currentTime);
}
});
audio.addEventListener('ended', function () {
durationCircle.style.strokeDashoffset = circleLength;
playPauseButton.setAttribute('aria-pressed', 'false');
playPauseButton.setAttribute('aria-label', 'Play audio');
currentTimeDisplay.textContent = '0:00';
});
}
createPlayer();
});
document.addEventListener('DOMContentLoaded', function () {
const playlistSource = document.querySelector('ul.playlist');
const playlist = [];
// Loop through all list items and extract data
playlistSource.querySelectorAll('li a').forEach(link => {
const item = {
source: link.getAttribute('href'),
title: link.textContent.trim()
};
playlist.push(item);
});
console.log(JSON.stringify(playlist, null, 2));
});
</script>
</body>
</html>
