HTML: Start-/Stop-Button für eine mp3-Datei?
Moin,
ich würde gerne meine drei HTML-Buttons mit den Sounds "null", "eins" und "zwei" so umfunktionieren, sodass sie beim zweiten Mal daraufklicken den Sound aufhören zu spielen. Also beim ersten Mal klicken Start und beim zweiten Mal klicken Sound-Stop.
Es wäre cool, wenn Ihr das direkt in mein Skript schreiben würdet. 😀
MfG
Tim
<!DOCTYPE html>
<html>
<head>
<style>
nav#nav1 {
margin-top: 48px;
}
nav#nav1 > a {
background: #B9E1FF;
color: #000;
padding: 20px;
text-decoration: none;
border-radius: 10px;
font-family: "Arial Black", Gadget, sans-serif;
}
nav#nav1 > a:hover {
background: #BBEA00;
}
nav#nav1 > a:active {
background: #EEFFA8;
}
</style>
<script>
var null = new Audio();
null.src = 'null.mp3';
</script>
<script>
var eins = new Audio();
eins.src = 'eins.mp3';
</script>
<script>
var zwei = new Audio();
zwei.src = 'zwei.mp3';
</script>
</head>
<body>
<nav id="nav1">
<a href="#" onmousedown="null.play()">Sound 0</a>
<a href="#" onmousedown="eins.play()">Sound 1</a>
<a href="#" onmousedown="zwei.play()">Sound 2</a>
</nav>
</script>
</body>
</html>
2 Antworten
Es gibt da einige Punkte, die du generell erst einmal verändern solltest.
1) In einem head-Element fehlt ein title-Tag mit nicht leerem Seitentitel. So lange bleibt dein Dokument erst einmal noch invalid.
2) Ein Tipp: Versuche nach Möglichkeit, eine Verknüpfung aus ID-/Klassenselektor mit Elementselektor zu vermeiden. Ich meine konkret nav#nav1. Zum einen ist der ID-Selektor allein ja schon recht eindeutig und zum anderen erlangst du mehr Flexibilität, wenn du den Elementnamen herauslässt. Dann kannst du später nämlich dein Markup ändern (es kann ja sein, dass das irgendwann einmal notwendig ist, wieso auch immer), bspw. aus dem nav ein div machen, ohne dass CSS ebenfalls großartig anfassen zu müssen.
3) Pack dein JavaScript doch in nur einen script-Block. Du brauchst nicht mehrere Blöcke. So lässt sich dein gesamtes JavaScript auch flüssiger lesen.
4) Der Bezeichner null ist schon reserviert, er kann nicht für eigene Variablen-/Funktions-/...-namen verwendet werden. null stellt den Wert einer leeren Referenz dar bzw. symbolisiert das Nichtvorhandensein eines Objekts.
Verwende also eher Namen wie eins, zwei, drei oder setze gleich ein Array ein, um gleiche Verfahren dann auch kürzer formulieren zu können.
const sounds = [];
const buttons = document.getElementsByClassName("audio-play");
for (let i = 0; i < buttons.length && i < sounds.length; ++i) {
sounds[i] = new Audio(i + ".mp3"); // 0.mp3, 1.mp3, 2.mp3
buttons[i].addEventListener("mousedown", () => sounds[i].play());
}
Ich habe an dieser Stelle die Dateinamen abgekürzt. Wenn sie unbedingt null.mp3, eins.mp3, ... heißen sollen, dann gib jedem Button ein data-Attribut mit seinem entsprechenden Namen. Via getAttribute-Methode kannst du dir den Namen dann holen und als Audio Source einsetzen.
5) Links sind keine Buttons. Sie sollen auf ein bestimmtes Ziel verweisen (eine andere Seite / ein anderes Seitenelement). Dementsprechend wäre ein Button-Element passender, denn dieses Element repräsentiert eine Schaltfläche, die bei Klick eine Aktion auslöst.
<button class="audio-play" type="button">Sound 0</button>
Den Styles dieses Elements kannst du frei mit CSS definieren.
6) Der schließende style-Tag kurz vor dem schließenden body-Tag ist redundant (und macht dein HTML-Dokument invalid), denn er hat keinen öffnenden Partner.
Zu deinem Problem:
Orientiere dich an dem paused-Property deines Audio-Objekts. Wenn es true ist, rufst du die play-Methode auf, andernfalls die pause-Methode.
Ich würde dir empfehlen eher mit einem eventListener zu arbeiten, sieht einfach meiner Meinung nach übersichtlicher aus.
Ich werde dein script nicht bearbeiten, denn durchs selber machen, lernt man es besser, aber um 2 Aktionen zu benutzen, kann man variablen nutzen.
Habe das gerade am Handy getippt, ich hoffe das passt so. Ansonsten gerne weitere Fragen kommentieren :D
var AudioBool = true;
if(AudioBool) {
//play-code
AudioBool = false;
}
else {
//stop code
AudioBool = true;
}