So erstellen Sie einen HTML5 -Audio -Player

Der einfachste Weg, um einen HTML5 -Audio -Player zu erstellen, besteht darin, das Element mit dem Steuerungsattribut zu verwenden, das die Standard -Wiedergabesteuerungen des Browsers anzeigt, die Audio -Datei und den MIME -Typ über das -Tag angibt und alternativen Text bietet, wenn audio nicht unterstützt wird, z. Audioelemente ". Um die Kompatibilität zu gewährleisten, können Sie verschiedene Formate wie MP3, OGG und WAV hinzufügen. Der Player -Container kann über CSS gestylt werden, um sich in das Seitenlayout zu integrieren. Wenn Sie eine vollständig angepasste Schnittstelle wie personalisierte Spieltasten und Fortschrittsbalken implementieren möchten, müssen Sie das Attribut der Steuerelemente entfernen, eine benutzerdefinierte Taste und eine Schleifleiste erstellen und JavaScript verwenden, um die Wiedergabe, Pause, Fortschrittssprung und Zeitanzeige zu steuern. Steuern Sie beispielsweise den Wiedergabestatus über die Methoden Play () und Pause () und überwachen Sie das TimeUpdate -Ereignis, um den Wiedergabefortschritt zu aktualisieren. Gleichzeitig können Sie Autoplay-, Schleifen-, gedämpfte und vorgeladene Attribute verwenden, um das Wiedergabeverhalten zu optimieren, aber eine unsilentliche automatische Wiedergabe sollte vermieden werden, um zu vermeiden, dass der Browser blockiert wird, und schließlich einen Audio -Player mit vollständigen Funktionen und einem vereinten Stil zu erkennen.

Das Erstellen eines HTML5-Audio-Players ist dank des integrierten <audio></audio> -Elements unkompliziert. Sie benötigen kein JavaScript, um einen grundlegenden Spieler zum Laufen zu bringen - obwohl Sie ihn bei Bedarf mit benutzerdefinierten Steuerelementen und Stylen verbessern können.

Hier erfahren Sie, wie Sie einen funktionalen HTML5 -Audio -Player erstellen:

Basic HTML5 Audio Player

Verwenden Sie das <audio></audio> Tag, um Audio in Ihre Webseite einzubetten. Die einfachste Version enthält das controls , um die Standard -Wiedergabesteuerungen des Browsers anzuzeigen.

 <Audiokontrollen>
  <Source Src = "Your-Audio-file.mp3" Typ = "Audio/mpeg">
  Ihr Browser unterstützt das Audioelement nicht.
</audio>

• controls : zeigt Spiele, Pause, Lautstärke und suchen Sie Kontrollen.
• <source> : Gibt die Audiodatei und ihren MIME -Typ an.
• Fallback -Text: angezeigt, wenn der Browser Audio nicht unterstützt.

Sie können mehrere Formate für eine bessere Browserkompatibilität unterstützen:

 <Audiokontrollen>
  <Source Src = "audio.mp3" Typ = "Audio/mpeg">
  <Source Src = "Audio.ogg" Typ = "Audio/OGG">
  <Source Src = "audio.wav" type = "audio/wav">
  Ihr Browser unterstützt das Audioelement nicht.
</audio>

Passen Sie den Audio -Player mit CSS an

Obwohl Sie die Standardsteuerungen wie ein reguläres Element nicht vollständig stylen können, können Sie den Player wickeln und den Container stylen oder Standardsteuerungen ausblenden und Ihre eigenen erstellen.

Beispiel: gestylertes Behälter

 <div class = "audio-player">
  <Audio ID = "MyAudio" kontrolliert>
    <Source Src = "music.mp3" type = "audio/mpeg">
    Ihr Browser unterstützt Audio nicht.
  </audio>
</div>

 .audio-Player {
  Rand: 20px;
  Polsterung: 15px;
  Hintergrund: #f0f0f0;
  Border-Radius: 8px;
  Box-Shadow: 0 2px 5px RGBA (0,0,0,0,1);
}

Audio {
  Breite: 100%;
}

Dadurch wird die internen Steuerelemente nicht geändert, aber es integriert den Player in Ihr Seitendesign.

Erstellen Sie einen benutzerdefinierten Audio -Player mit JavaScript

Um eine vollständig benutzerdefinierte Oberfläche (wie eine stilvolle Wiedergabetaste oder eine Fortschrittsleiste) zu erstellen, verbergen Sie die Standardsteuerungen und verwenden Sie JavaScript, um die Wiedergabe zu verwalten.

Schritt für Schritt:

1. Entfernen Sie controls aus dem <audio> -TAG.
2. Fügen Sie benutzerdefinierte Tasten und Elemente hinzu.
3. Verwenden Sie JavaScript, um die Wiedergabe zu kontrollieren.

 <div class = "Custom-Audio">
  <audio id = "audio">
    <Source Src = "music.mp3" type = "audio/mpeg">
  </audio>
  <button id = "spielepause"> abplay </button>
  <Eingabe type = "Bereich" id = "suchbar" value = "0">
  <span id = "Timer"> 0:00 </span>
</div>

 const audio = document.getElementById ("audio");
const playpauseBtn = document.getElementById ("spielepause");
const seexbar = document.getElementById ("seexBar");
const timer = document.getElementById ("Timer");

// Suchleiste und Timer als Audio -Spiele aktualisieren
Audio.AdDeVentListener ("TimeUpdate", () => {
  const currentime = audio.currenttime;
  const Minuten = math.floor (Currentime / 60);
  const secens = math.floor (currentime % 60) .ToString (). Padstart (2, '0');
  Timer.TextContent = `$ {muthines}: $ {Sekunden}`;

  seeenBar.Value = (currentime / audio.duration) * 100 || 0;
});

// Umschalten/Pause
PlaypauseBtn.AddeVentListener ("Click", () => {
  if (audio.pauded) {
    audio.play ();
    PlayPauseBtn.TextContent = "Pause";
  } anders {
    audio.pause ();
    PlaypauseBtn.TextContent = "Play";
  }
});

// suche Barkontrolle
seeenbar.addeventListener ("wechseln", () => {
  const time = (suchBar.Value * audio.duration) / 100;
  Audio.CurrentTime = Zeit;
});

Jetzt haben Sie einen kundenspezifischen Player mit einer Spiel-/Pause-Taste, einer Fortschrittsleiste und einer Zeitanzeige.

Zusätzliche Audioattribute

Sie können das Verhalten anhand dieser Attribute verbessern:

• autoplay : Startet automatisch (nicht für UX empfohlen).
• loop : Schleifen Sie das Audio.
• muted : standardmäßig Stumms.
• preload : Steuerelemente Vorspannung ( none , metadata , auto ).

Beispiel:

 <Audio Controls Loop Stummel vorloart = "metadata">
  <Source Src = "bg-music.mp3" type = "audio/mpeg">
</audio>

Tipps und Best Practices

• Bietet immer Fallback -Inhalte für ältere Browser.
• Verwenden Sie weithin unterstützte Formate wie MP3 für maximale Kompatibilität.
• Vermeiden Sie autoplay , sofern nicht gedämpft - viele Browser blockieren das Audio -Autoplay.
• Test auf mobilen Geräten; Einige Plattformen (wie iOS safari) haben Einschränkungen für die Wiedergabe von Autoplay und Programmierung.

Grundsätzlich gibt Ihnen das HTML5 <audio></audio> -Element einen arbeitenden Player in einer Zeile. Von dort aus können Sie es durch Styling, benutzerdefinierte Steuerelemente und JavaScript verbessern, um das Design und die Funktionalität Ihrer Website zu entsprechen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen HTML5 -Audio -Player. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!