Beispiel:Audio-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

   <title>Playlisten und mehr</title>

<style>

  1. 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>

Playlisten und mehr

<audio id="audio_with_controls" controls src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3" > Ihr Browser kann dieses Tondokument nicht wiedergeben.
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>

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>.

<a href="https://forum.selfhtml.org/advent/2024">
<img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px">

Zurück zum
Adventskalender 2024.

</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', `

               <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>

0:00 / 0:00

<button id="back" aria-label="gehe zum vorherigen Titel" aria-pressed="false"></button>

Titel

<button id="next" aria-label="gehe zum nächsten Titel" aria-pressed="false"></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) {
               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 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));

const audio = document.querySelector('#audio_with_controls'); 

   const titleDisplay = document.querySelector('#titel');

   let currentIndex = 0;

   function loadTrack(index) {
       if (index >= 0 && index < playlist.length) {
           const track = playlist[index];
           audio.src = track.source;
           titleDisplay.textContent = track.title;
           audio.play();
       }
   }

   function playNext() {
       currentIndex++;
       if (currentIndex >= playlist.length) {
           currentIndex = 0; // Loop back to the first track
       }
       loadTrack(currentIndex);
   }

   function playPrevious() {
       currentIndex--;
       if (currentIndex < 0) {
           currentIndex = playlist.length - 1; // Loop to the last track
       }
       loadTrack(currentIndex);
   }

   audio.addEventListener('ended', playNext);
   document.querySelector('#next').addEventListener('click', playNext);
   document.querySelector('#back').addEventListener('click', playPrevious);

   loadTrack(currentIndex);

});

</script> </body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Audio-5.html&oldid=100305“