Audio nur als Lautsprecher

Question

Ich möchte die Audio-Datei nur als Lautsprechersymbol darstellen. Wenn man auf dieses Symbol klickt, dann soll die Audio-Datei abgespielt werden.
Ist das möglich ?

Die Audio-Datei habe ich in die Items mit folgenden Code eingebunden:

<audio id="audio02" controls  controlsList="nodownload" style="width: 200px; height: 80px">
  <source src="Daten-2mp3" type="audio/mpeg" />
</audio>

Answer 1

Das erreichen Sie, indem Sie den Ausdio-Player unsichtbar schalten, z.B.

<audio id="audio02" style="display: none" controls  ...

Und dann müssen Sie noch einen hübschen Lautsprecher als Knopf einbinden und zum Abspielen nutzen:

<button type="button" id="button02">
<img src="lautsprecher.png">
</button>

<script>
document.getElementById("button02").addEventListener("click", function() {
    document.getElementById("audio02").play();
});
</script>