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

HTML5 hidden audio player

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
 

basti1012

Senior HTML'ler
Das verstehe ich nicht so ganz
Also würde ich in meiner primitiven WebSeite den HTML5 Audio Player für jeden Sender (ca. 12), gerne hidden aufrufen.
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?
 

Mollo

Neues Mitglied
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

Senior HTML'ler
So macht das natürlich Sinn. Versuche diesen Code:
Code:
    <audio id="ndr2" src="http://icecast.ndr.de/ndr/ndr2/hamburg/mp3/128/stream.mp3"></audio>
    <audio id="ndr1wellenord" src="http://icecast.ndr.de/ndr/ndr1wellenord/flensburg/mp3/128/stream.mp3"></audio>
    <button data-audio-id="ndr2">
        NDR 2
    </button>
    <button data-audio-id="ndr1wellenord">
        NDR 1 Welle Nord
    </button>
    <script>
        // Alle Audioelemente bereit stellen:
        const audios = document.querySelectorAll('audio');
        // Eventlistener für window registrieren:
        window.addEventListener('click', event => {
            // Wurde ein Button gedrückt?
            if (event.target.matches('button')) {
                // Alle Audios stoppen:
                audios.forEach(audio => {
                    audio.pause();
                });
                // Das Audio, das zu dem gedrückten Button gehört, abspielen:
                const audio = document.getElementById(event.target.dataset.audioId);
                audio.play();
            }
        });
    </script>
 

Sempervivum

Senior HTML'ler
Das Hervorheben des aktiven Buttons hatte ich übersehen.
Code:
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        button {
            background-color: lightgray;
        }

        button.active {
            background-color: lightblue;
        }
    </style>

</head>

<body>
    <audio id="ndr2" src="http://icecast.ndr.de/ndr/ndr2/hamburg/mp3/128/stream.mp3"></audio>
    <audio id="ndr1wellenord" src="http://icecast.ndr.de/ndr/ndr1wellenord/flensburg/mp3/128/stream.mp3"></audio>
    <button data-audio-id="ndr2">
        NDR 2
    </button>
    <button data-audio-id="ndr1wellenord">
        NDR 1 Welle Nord
    </button>
    <script>
        // Alle Buttons bereit stellen:
        const buttons = document.querySelectorAll('button');
        // Eventlistener für window registrieren:
        window.addEventListener('click', event => {
            // Wurde ein Button gedrückt?
            if (event.target.matches('button')) {
                // Schleife über alle Buttons:
                buttons.forEach(button => {
                    // Das Audio, das dazu gehört, bereit stellen:
                    const audio = document.getElementById(button.dataset.audioId);
                    // Handelt es sich um den Button der gedrückt wurde?
                    if (button == event.target) {
                        // Audio abspielen:
                        audio.play();
                        // Klasse beim Button hinzufügen die angibt,
                        // dass das Audio gerade aktiv ist:
                        button.classList.add('active');
                    } else {
                        audio.pause();
                        button.classList.remove('active');
                    }
                });
            }
        });
    </script>
</body>


</html>
 

Sempervivum

Senior HTML'ler
Inzwischen ist mir aufgefallen, dass es einfacher geht, wenn man nur ein audio-Tag verwendet:
Code:
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        button {
            background-color: lightgray;
        }

        button.active {
            background-color: lightblue;
        }
    </style>

</head>

<body>
    <audio></audio>
    <button data-audio-url="http://icecast.ndr.de/ndr/ndr2/hamburg/mp3/128/stream.mp3"">
        NDR 2
    </button>
    <button data-audio-url=" http://icecast.ndr.de/ndr/ndr1wellenord/flensburg/mp3/128/stream.mp3">
        NDR 1 Welle Nord
    </button>
    <script>
        // Alle Audioelement bereit stellen:
        const
            buttons = document.querySelectorAll('button'),
            player = document.querySelector('audio');
        // Eventlistener für window registrieren:
        window.addEventListener('click', event => {
            // Wurde ein Button gedrückt?
            if (event.target.matches('button')) {
                // Schleife über alle Buttons:
                buttons.forEach(button => {
                    // Handelt es sich um den Button der gedrückt wurde?
                    if (button == event.target) {
                        // Klasse beim Button hinzufügen die angibt,
                        // dass das Audio gerade aktiv ist:
                        button.classList.add('active');
                    } else {
                        button.classList.remove('active');
                    }
                });
                player.src = event.target.dataset.audioUrl;
                player.play();
            }
        });
    </script>
</body>


</html>
 
Zuletzt bearbeitet:

Mollo

Neues Mitglied
Bei deinem Beispiel Codepen, kannst du die Sender Styles so ändern
Vielen Dank für deine Änderunsvorschlag.
Ich habe die font-size Änderung am Ende der style.css Datei gefunden und kann sie anpassen.
In dem Bedienungsfeld würde ich gerne Start/Stop Vor und Zurück verschieben und den Rest löschen.
Kanst Du bitte nochmal helfen?
Bedienung.jpg
 

Mollo

Neues Mitglied
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
 

Sempervivum

Senior HTML'ler
Selbstverständlich, die Klasse "active" gibt ja an, ob der Stream, der zu dem Button gehört, schon aktiv ist und in dem Fall kann man den Player anhalten. Man muss also nur ein zweites Mal den Button drücken:
Code:
    <script>
        const
             player = document.querySelector('audio');
        // Eventlistener für window registrieren:
        window.addEventListener('click', event => {
            // Wurde ein Button gedrückt?
            if (event.target.matches('button')) {
                // Ist der betr. Stream gerade aktiv?
                if (event.target.classList.contains('active')) {
                    // Player anhalten:
                    player.pause();
                    // Klasse "active" löschen:
                    event.target.classList.remove('active');
                } else {
                    // Klasse "active" bei dem Button löschen, der sie gerade hat:
                    const activeBtn = document.querySelector('button.active');
                    if (activeBtn) activeBtn.classList.remove('active');
                    // Klasse "active" beim gedrückten Button setzen:
                    event.target.classList.add('active');
                    // URL, die beim Button gespeichert ist,
                    // in das src-Attribut des Players eintragen:
                    player.src = event.target.dataset.audioUrl;
                    // Stream abspielen:
                    player.play();
                }
            }
        });
    </script>
 
Zuletzt bearbeitet:

Mollo

Neues Mitglied
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
 
Werbung:
Oben