Audioplayer zur Nutzung auf mobilen Geräten ⇐ Android

[Guest]

Ich verwende webtoapp.design, um die Website meines Jobs in eine mobile App umzuwandeln. Ich bin keineswegs ein Ingenieur, ich versuche nur, mein Bestes aus dem zu geben, was mir gegeben wird. Ich habe alles, was ich über HTML weiß, aus einigen sehr einfachen College-Kursen und YouTube-Videos sowie zahlreichen Reddit- und Stack-Overflow-Threads gelernt. Und um ehrlich zu sein, weiß ich immer noch nicht viel.
Das aktuelle Problem, mit dem wir konfrontiert sind, besteht darin, einen Audio-Player zu erstellen, der auf unserer Website verfügbar ist, und zwar mit dem Dienst webtoapp.design wird erkannt, so dass es über die richtige Hintergrundfunktionalität verfügt. Ich habe mit dem Eigentümer der Website zusammengearbeitet und er hat diese Funktionalität aktiviert und sie funktioniert grundsätzlich. Aber es ist sehr knifflig und funktioniert nur, wenn man damit herumspielt, was für eine Consumer-App nicht ideal ist. Ich suche nach einem Audioplayer, den ich in meine Website einbetten kann und der auf Mobilgeräten funktioniert, wenn der Browser oder die App minimiert ist, sofern im Browser oder in der App die Funktionalität aktiviert ist.
Dies ist der aktuelle Version des Audioplayers, an dem ich gearbeitet habe, aber er funktioniert auf Mobilgeräten nicht richtig, da das Pausensymbol aus irgendeinem Grund bei der Anzeige auf Mobilgeräten nicht richtig angezeigt wird. Ich brauche nur einen einfachen Play/Pause-Audioplayer, da die Audioquelle live ist und einen Abspielkopf benötigt.

Code: Select all

function togglePlayPause() {
var player = document.getElementById('player');
var button = document.getElementById('playPauseButton');
if (player.paused) {
player.play();
button.textContent = '⏸';
} else {
player.pause();
button.textContent = '▶';
}
}

Code: Select all

.custom-button {
background-color: #9f90ae;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
line-height: 1;
}

.custom-button:hover {
background-color: #45a049;
}

Code: Select all

▶