Beispiel:Audio-5.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<title>Playlisten und mehr</title>
<style>
#audio-player {
width: 24em;
margin: 2em auto;
display: grid;
grid-template-columns: 16em 8em;
border: thin solid;
#display {
aspect-ratio: 1 / 1;
display: grid;
position: relative;
svg {
grid-area: 1 /1;
}
#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: 3em;
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 {
grid-area: 1 / 1;
text-align: center;
place-self: end center;
margin-bottom: 0;
}
#controls {
grid-area: 2/2;
button {display:inline-block; width: 2em; aspect-ratio: 1 / 1;border: none; transition: all 1s;}
#back {scale: -1 1;}
#next {float:right;}
}
#playlist
background: pink;
button {
background: none;
bordeR: none;
}
[aria-selected] {
background: #337599;
color: white;
}
}
body {
max-width: 55em;
margin: 0 auto;
}
</style>
</head>
<body><h1>Playlisten und mehr</h1>
<audio id="audio_with_controls"
controls
src="https://wiki.selfhtml.org/images/c/c1/Adeste_Fideles.mp3"
type="audio/mp3"
>
Ihr Browser kann dieses Tondokument nicht wiedergeben.<br>
Es enthält eine Aufführung von Weihnachtsliedern.
Sie können es unter
<a href="https://wiki.selfhtml.org/wiki/Beispiel:Audio-5.html">diesem Link</a>
abrufen.
</audio>
<h2>Unsere Weihnachtslieder</h2>
<ul class="linklist">
<li><a href="https://wiki.selfhtml.org/images/c/c1/Adeste_Fideles.mp3">Herbei, Oh Ihr Gläubigen</a></li>
<li><a href="https://wiki.selfhtml.org/images/a/aa/Joy_to_the_World_-_Cwmbach_Male_Voice_Choir.mp3">Joy to the world!</a></li>
<li><a href="https://wiki.selfhtml.org/images/3/35/O_du_fr%C3%B6hliche_EG_44_.mp3">Oh du Fröhliche</a></li>
<li><a href="https://wiki.selfhtml.org/images/3/3b/We_wish_you_a_merry_Christmas.mp3">We wish you a merry Christmas!</a></li>
<li><a href="https://wiki.selfhtml.org/images/0/03/Weihnachtsbesinnung.mp3">Stille Nacht</a></li>
</ul>
<hr>
<p>Zum Tutorial: <a href="https://wiki-test.selfhtml.org/wiki/Multimedia/Playlists_und_mehr#Erstellen_und_Wiedergabe_von_Playlists">Erstellen und Wiedergabe von Playlists</a>.</p>
<a href="https://forum.selfhtml.org/advent/2024"><div style="display:grid;grid-template-columns: 63px 1fr; gap:0.5em;"><img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px"><p>Zurück zum <br><b>Adventskalender 2024</b>.</p></div></a>
<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">
<ol id="playlist"></ol>
<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>
<button id="next" aria-label="gehe zum nächsten Titel" aria-pressed="false"></button>
</div>
</div>
`);
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) {
audio.play();
playPauseButton.setAttribute('aria-pressed', 'true');
playPauseButton.setAttribute('aria-label', 'Pause audio');
} else {
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 audio = document.querySelector('#audio_with_controls');
const playlistElement = document.querySelector('ol#playlist');
const linkList = document.querySelector('ul.linklist');
const controls = document.querySelector('#controls');
const nextButton = document.querySelector('#next');
const backButton = document.querySelector('#back');
const playlist = [];
// Loop through all list items and extract data
linkList.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));
let currentIndex = 0;
function createPlaylist() {
playlist.forEach((track, index) => {
const li = document.createElement('li');
const button = document.createElement('button');
button.textContent = track.title;
button.setAttribute('aria-label', `Play ${track.title}`);
button.addEventListener('click', () => playTrack(index));
li.appendChild(button);
playlistElement.appendChild(li);
});
updateAriaSelected();
}
function playTrack(index) {
currentIndex = index;
audio.src = playlist[currentIndex].source;
audio.play();
updateAriaSelected();
}
function updateAriaSelected() {
const allButtons = playlistElement.querySelectorAll('button');
allButtons.forEach((button, idx) => {
if (idx === currentIndex) {
button.setAttribute('aria-selected', 'true');
} else {
button.removeAttribute('aria-selected');
}
});
}
function playNext() {
currentIndex = (currentIndex + 1) % playlist.length;
playTrack(currentIndex);
}
function playPrevious() {
currentIndex = (currentIndex - 1 + playlist.length) % playlist.length;
playTrack(currentIndex);
}
audio.addEventListener('ended', playNext);
nextButton.addEventListener('click', playNext);
backButton.addEventListener('click', playPrevious);
createPlaylist();
playTrack(currentIndex);
});
</script>
</body>
</html>
