HTML - Audio-Player
Willkommen, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Audio-Player ein. Bis zum Ende dieses Tutorials wirst du in der Lage sein, deinen eigenen benutzerdefinierten Audio-Player zu erstellen und sogar einige coole visuelle Effekte hinzuzufügen. Also, lassen wir unsere Code-Hüte aufsetzen und diese musikalische Reise beginnen!
HTML-Lokaler Audio-Player mit Visualizer
Grundlagen des HTML-Audios
Bevor wir einen schicken Audio-Player erstellen, beginnen wir mit den Grundlagen. HTML5 führte das <audio>-Element ein, das es super einfach macht, Audio in deine Webseiten einzufügen. Hier ist ein einfaches Beispiel:
<audio controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
Dein Browser unterstützt das Audio-Element nicht.
</audio>In diesem Code:
- Das
<audio>-Tag erstellt einen Audio-Player. - Das
controls-Attribut fügt Play-, Pausen- und Lautstärkeregler hinzu. - Das
<source>-Tag gibt die abzuspielende Audiodatei an. - Wir inkludieren eine Ausweichnachricht für Browser, die das
<audio>-Element nicht unterstützen.
Erstellen eines benutzerdefinierten Audio-Players
Nun erstellen wir einen mehr individualisierten Audio-Player. Wir verwenden HTML, CSS und JavaScript, um diesen zu bauen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benutzerdefinierter Audio-Player</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Play</button>
<input type="range" id="seek-bar" value="0">
</div>
<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
});
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});
seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});
</script>
</body>
</html>Lassen wir das auseinander fallen:
- Wir erstellen einen Container
<div>für unseren benutzerdefinierten Player. - Innen haben wir ein
<audio>-Element (ohne Steuerungen), einen Play/Pause-Button und einen Suchbalken. - Im JavaScript:
- Wir wechseln zwischen Play/Pause, wenn der Button geklickt wird.
- Wir aktualisieren den Suchbalken, während das Audio abgespielt wird.
- Wir erlauben das Suchen, indem wir auf den Suchbalken klicken.
Hinzufügen eines Visualizers
Nun fügen wir einen einfachen Visualizer hinzu, um unseren Player ansprechender zu gestalten. Wir verwenden die Web Audio API dafür:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio-Player mit Visualizer</title>
<style>
#custom-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn {
width: 100px;
height: 30px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#visualizer {
width: 300px;
height: 150px;
background-color: #000;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="custom-player">
<audio id="audio-element" src="your-audio-file.mp3"></audio>
<button id="play-pause-btn">Play</button>
<input type="range" id="seek-bar" value="0">
<canvas id="visualizer"></canvas>
</div>
<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const seekBar = document.getElementById('seek-bar');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
// Audio-Context einrichten
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
// Play/Pause-Funktionalität
playPauseBtn.addEventListener('click', () => {
if (audioContext.state === 'suspended') {
audioContext.resume();
}
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
});
// Suchbalken-Funktionalität
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});
seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});
// Visualizer
function drawVisualizer() {
requestAnimationFrame(drawVisualizer);
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 2;
ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
}
drawVisualizer();
</script>
</body>
</html>In dieser erweiterten Version:
- Wir fügen ein
<canvas>-Element für unseren Visualizer hinzu. - Wir richten einen Audio-Context und einen Analyzer mit der Web Audio API ein.
- Die
drawVisualizer-Funktion erstellt eine Balkendiagramm-Visualisierung der Audiofrequenzen.
Lokaler Audio-Player mit Playlist
Nun erstellen wir einen Player, der mehrere Titel verwalten kann:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio-Player mit Playlist</title>
<style>
#playlist-player {
width: 300px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#play-pause-btn, #prev-btn, #next-btn {
width: 80px;
height: 30px;
margin: 5px;
}
#seek-bar {
width: 100%;
margin-top: 10px;
}
#playlist {
list-style-type: none;
padding: 0;
}
#playlist li {
cursor: pointer;
padding: 5px;
}
#playlist li:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="playlist-player">
<audio id="audio-element"></audio>
<button id="prev-btn">Vorheriges</button>
<button id="play-pause-btn">Play</button>
<button id="next-btn">Nächstes</button>
<input type="range" id="seek-bar" value="0">
<ul id="playlist">
<li data-src="song1.mp3">Titel 1</li>
<li data-src="song2.mp3">Titel 2</li>
<li data-src="song3.mp3">Titel 3</li>
</ul>
</div>
<script>
const audio = document.getElementById('audio-element');
const playPauseBtn = document.getElementById('play-pause-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const seekBar = document.getElementById('seek-bar');
const playlist = document.getElementById('playlist');
let currentTrack = 0;
function loadTrack(index) {
const tracks = playlist.getElementsByTagName('li');
if (index >= 0 && index < tracks.length) {
currentTrack = index;
audio.src = tracks[currentTrack].getAttribute('data-src');
audio.load();
playPauseBtn.textContent = 'Play';
}
}
function playPause() {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = 'Pause';
} else {
audio.pause();
playPauseBtn.textContent = 'Play';
}
}
playPauseBtn.addEventListener('click', playPause);
prevBtn.addEventListener('click', () => {
loadTrack(currentTrack - 1);
});
nextBtn.addEventListener('click', () => {
loadTrack(currentTrack + 1);
});
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
seekBar.value = progress;
});
seekBar.addEventListener('input', () => {
const time = (seekBar.value / 100) * audio.duration;
audio.currentTime = time;
});
playlist.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
const tracks = playlist.getElementsByTagName('li');
loadTrack([...tracks].indexOf(e.target));
playPause();
}
});
loadTrack(0);
</script>
</body>
</html>In dieser Playlist-Version:
- Wir erstellen eine Liste von Titeln mit einer ungeordneten Liste.
- Wir fügen Vorheriges und Nächstes-Buttons für die Navigation hinzu.
- Das JavaScript verwaltet das Laden von Titeln, das Abspielen/Pausieren und das Wechseln zwischen Titeln.
Audio-Player-Methoden
Hier ist eine Tabelle der gängigen Audio-Player-Methoden und ihrer Beschreibungen:
| Methode | Beschreibung |
|---|---|
play() |
Startet das Abspielen des Audios |
pause() |
Pausiert das Audio |
load() |
Lädt das Audio-Element neu |
currentTime |
Holt oder setzt die aktuelle Wiedergabeposition in Sekunden |
duration |
Holt die Gesamtlaufzeit des Audios in Sekunden |
volume |
Holt oder setzt die Lautstärke (0.0 bis 1.0) |
muted |
Holt oder setzt, ob das Audio stummgeschaltet ist |
playbackRate |
Holt oder setzt die Wiedergabegeschwindigkeit |
Und das war's! Du hast nun gelernt, wie man grundlegende und erweiterte HTML-Audio-Player erstellt, complete mit Visualisern und Playlists. Denke daran, dass Übung den Meister macht, also fürchte dich nicht, diese Beispiele zu experimentieren und anzupassen, um deinen Bedürfnissen zu entsprechen. Frohes Coden und möge deine Webseiten mit schöner Musik gefüllt sein!
Credits: Image by storyset