• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML5 hidden audio player

M

Mollo

Neues Mitglied
Für mein iPhone würde ich gerne meine Lieblings Radiosender über eine eigene Webseite aufrufen.
Bisher nutze ich eine einfache RadioApp, aber zeitweise werden einige Sender nicht gefunden.
Im Netz habe ich HTML5 Audio Player with Playlist gefunden. Dies Beispiel ist aber so komplex, dass ich mit meinen geringen HTML, JS, CSS Kenntnissen, die Änderungen zur bessen Lesbarkeit auf dem iPhone nicht geschafft habe.

Also würde ich in meiner primitiven WebSeite den HTML5 Audio Player für jeden Sender (ca. 12), gerne hidden aufrufen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Mollos_Radioliste</title>
<style type="text/css">
.style5 {font-size: 20px}
.auto-style1 {
    text-align: center;    font-size: 55px;}
.Stil6 {font-size: 30px; text-align: center;}
.flex-container { max-width: 50em; display: -webkit-flex; display: -moz-flex;
    display: flex; gap: 1px; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap;
    flex-flow: row wrap; -webkit-align-items: center; align-items:center;
    -webkit-align-content: center;     align-content:center;
}

.flex-item1 { -webkit-flex: 1 0 400px;   /* auto */
    -moz-flex: 1 0 400px; flex: 1 0 400px; align-self: auto; background: silver;
    text-align: center; border: black 1px solid; border-radius: 5px; height: 95px;
    font-size:80px;    font-weight: bold;
}
</style>

</head>
<body>
<h1 class="auto-style1 Stil6">Mollo's Radios und Podcasts Favoriten</h1>

<div class="flex-container">
  <div class="flex-item1",>
      <a href="http://icecast.ndr.de/ndr/ndr1wellenord/flensburg/mp3/128/stream.mp3"><strong>NDR Welle Nord</strong></a>
  </div>
 
  <div class="flex-item1">
      <a href="http://icecast.ndr.de/ndr/ndr2/hamburg/mp3/128/stream.mp3">NDR 2</a>
  </div>
     
</div>
<hr>
</body>
</html>

Hier: html - Playing Sound In Hidden Tag - Stack Overflow habe ich Beispiele gefunden, weiss abe nich, wie dise in meiner Seite eingefügt werden
Vielleicht könnt Ihr mir ja ein Beispiel aufzeigen.
Grüße Thomas
 
Das verstehe ich nicht so ganz
Mollo schrieb:
Also würde ich in meiner primitiven WebSeite den HTML5 Audio Player für jeden Sender (ca. 12), gerne hidden aufrufen.
Zum Vergrößern anklicken....
Was meinst du mit hidden aufrufen?
Den Player unsichtbar machen oder verstecken sollte kein Problem sein , doch wie ändert man den dann den Sender ?
Wenn er ja hidden ist, kannst du ja den Player von Codepen auch benutzen , man sieht den Player ja nicht?

Oder verstehe ich da jetzt was falsch?
 
MollosRadioliste.png
Ich möchte auf den Sender tippen, der wird abgespielt und
der Sender Button wird eingefärbt. Es sollte dann ein
Sender-Wechsel möglich sein. Ich brauche keine weitere Anzeige vom HTML5 audio.
Im obigen Codepen Beispiel die Schriftgrößen zu ändern, habe ich nicht verstanden (Zusammenhang zwischen CSS und JS). Deshalb meine eigenen Versuche
 
Sempervivum schrieb:
Das Hervorheben des aktiven Buttons hatte ich übersehen.
Code: 
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
.
.
[/QUOTE]
Auch hier vielen Dank für Dein bestechend kurzes Beispiel. Ist es möglich mit einem extra Button oder mit einem weiteren Klick auf das laufende Programm die Wiedergabe zu stoppen?
Grüße Thomas
Zum Vergrößern anklicken....
 
Hallo Sempervivum, nochmal Danke für Dein Script.
Werde nun erstmal ein bisschen CSS üben und mich dann noch an Erweiterungen wagen.
Pfingstgrüße aus Hamburg
Thomas
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben