Button soll AudioStream on/off schalten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
art
bild
boxen
browser
button
code
dialog
element
http
jazzen
lernen
listen
musik
radio
realisieren
schliessen
semikolon
tag
url
video
-
Hallo,
mir gelingt es nicht einen tag/button">Button auf meiner WebSite zu realisieren, mit dem ich den AudioStream einer anderen WebSite aufrufen und wieder abschalten kann.
Hier der Link zum AudioStream Smooth Jazz - nicht ganztägig zu erreichen.
Lange Rede, der Button im Beispiel oben links zeit was ich meine.
Natürlich habe ich schon einiges ausprobiert:
Hier wird eine lokale MusikDatei im mp3 Format in den Puffer geladen der durch den angezeigten StartButton gestartet und wieder beendet werden kann. Es wird nur der Start/Stopp Button der Controls angezeigt, weil Breite und Höhe so minimal gewählt sind.
<video src="musikdatei.mp3" width="1" height="1"
autobuffer
controls>
</video>
Genau so möchte ich diesen Knopf realisieren, nur leider lässt video src keine WWW-Adressen zu.
Andere erfolglose Experimente:
<!-- Grafik-DIALOG-BOX öffnen und schliessen -->
<ul id="galerie">
<a href="#bild1"><img src="start.jpg"></a>
</ul>
<figure id="bild1" class="details"><img src="stop.jpg">
<a class="close" id="c1" href="#c1" title="schliessen"></a>
</figure>
oder
<!-- Text-DIALOG-BOX öffnen und schliessen -->
<dialog id="meinDialog">
<a href="http://cloudrad.io/smoothjazz/player.html" target="_blank">
DialogBox mit SprungZiel
</dialog>
</a>
<a href="#meinDialog">BOX öffnen</a>
<br><br>
<a href="#">BOX schliessen</a>
Wie Ihr seht weiß ich nicht wirklich wonach ich suchen soll.
Es bittet um Hilfe... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das video-Element ist da auch vollkommen fehl am Platz. Es gibt doch das audio-Element dafür. Dafür einfach in der Spezifikation nachschauen. > http://www.w3schools.com/html/html5_audio.asp
Edit: Man kann natürlich das auch entsprechen verstecken und dann ggs. mit JS entsprechend das Element ansteuern.
Beitrag zuletzt geändert: 9.12.2016 3:26:24 von muellerlukas -
http://sj128.hnux.com
http://sj128.hnux.com/listen.pls
ist die Stream url (kannste auch mitn VLC-Player abspielen)
http://www.radioforge.com/html5-radio-player/
zum einbinden oder suche dir einen html5-radio-player (jquery)
<iframe src="http://player.radioforge.com/v2/shoutcast.html?radiolink=http://sl32.hnux.com/listen.pls&radiotype=shoutcast1&bcolor=&image=http://sl32.hnux.com/listen.pls&facebook=http://sl32.hnux.com/listen.pls&twitter=http://sl32.hnux.com/listen.pls&title=http://sl32.hnux.com/listen.pls&artist=" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="367" height="227"></iframe>
oder direktlink
http://player.radioforge.com/v2/shoutcast.html?radiolink=http://sl32.hnux.com/listen.pls&radiotype=shoutcast1&bcolor=&image=http://sl32.hnux.com/listen.pls&facebook=http://sl32.hnux.com/listen.pls&twitter=http://sl32.hnux.com/listen.pls&title=http://sl32.hnux.com/listen.pls&artist=
Nachtrag:
Schöne Musik spielen die da :D
Beitrag zuletzt geändert: 9.12.2016 16:14:31 von mg123 -
@mg123,
interessante Idee das mit einem externen Player zu realisieren!
Ja, die Musik gefällt mir auch sehr.
@muellerlukas,
Der audio tag kann leider auch kein streaming wiedergeben. Wie bei U. Häßler zu lesen, ist auch der audio tag für mein Vorhaben nicht zu gebrauchen.
Das kann doch nicht so schwer sein?
Ich rede mal ins blaue:
Auf meiner WebSite unten links das grüne Bild.
Drauf klicken, dann wird der SJ Link aufgerufen und die Muke abgespielt, die Anzeige der Seite wird unterdückt, es wird an der selben Stelle des Bildes ein anderes Bild dargestellt, mit dem Hinweis für zurück. Die SJ-Seite wird gelöscht. Alles steht wieder auf Anfang.
Genau wie der SWR3 es macht oben links zu sehen. -
@staymyfriend,
ja, nur dass der SWR3 das mit seinen eigenen mp3s etc. machen kann und ich auf einen StreamingLink http://sj128.hnux.com zugreife.
@mg123,
der externe Player funktioniert gut :-)
Bedingung ist jedoch diesen auf meine Bildgröße anzupassen. Mal sehen ob sich da was machen lässt...<iframe src="http://player.radioforge.com/v2/shoutcast.html?radiolink=http://sj128.hnux.com/listen.pls&radiotype=shoutcast1&bcolor=&image=http://sj128.hnux.com/listen.pls&facebook=http://sjl28.hnux.com/listen.pls&twitter=http://sjl28.hnux.com/listen.pls&title=http://sj128.hnux.com/listen.pls&artist=" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="300" height="200"></iframe>
-
Hi,
der Stream des Webradios für welches ich den Soundmanager als Player nutze, liegt auch auf einem Fremdserver... alles kein Problem soweit. Zudem werden relativ wenig Resourcen verbraucht, was den Betreiber immer wieder freut! -
Der audio-Tag funktioniert im Chrome und im Firefox problemlos fürs Streaming. Man muss halt nur die entsprechende URL zum MP3-Stream nutzen. In deinem Fall: http://sj128.hnux.com/;
Man beachte das Semikolon am Ende. Hier mal als Live-Beispiel: https://muellerlukas.lima-city.de/forum/jazz-player.html
Edit: Noch kurz zur Erklärung. Das Semikolon schaltet einfach die Browsererkennung von ShoutCast ab bzw. weißt es an direkt die Streamdaten rauszuhauen.
Beitrag zuletzt geändert: 11.12.2016 4:28:10 von muellerlukas -
Bei w3schools einfügen und auf "Run" klicken oder als html datei speichern...
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(window).load(function(){ $(document).ready(function(e){ $('#streamplayer').on("click",".playbutton",function(e){ audio=$("#audioplayer"); if($( "#streamplayer" ).hasClass( "playing" )){ $( "#streamplayer" ).removeClass( "playing" ); audio[0].pause(); } else{ $( "#streamplayer" ).addClass( "playing" ); audio[0].play(); } }) }) }); </script> <style type="text/css"> #streamplayer{ width:90px; height:66px; background-size: 90px 66px; background-image:url(http://www.mukerbude.de/images/SmoothJazz.jpg); text-align:center; border:2px double black; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.playbutton:link, a.playbutton:active, a.playbutton:visited{ width:90px; height:66px; font-size:22px; display:block; text-decoration:none; color:white; } a.playbutton:hover{ background-color:rgba(255, 0, 0,0.3 ) !important; color:red; } .playing{ border:2px double red !important; } audio{ display:none; } </style> </head> <body> <audio id="audioplayer" controls src="http://sj128.hnux.com/;stream.mp3"></audio> <div id="streamplayer"> <a class="playbutton" href="#">▶</a> </div> </body>
Edit oder was einfaches...
<body> <audio controls preload="none" style="height:25px;width:110px;"> <source src="http://sl32.hnux.com/;stream.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <p></p> <img width="90px" height="66px" src="http://www.mukerbude.de/images/SmoothJazz.jpg" border="0" > </body>
Beitrag zuletzt geändert: 12.12.2016 17:07:13 von mg123 -
@muellerlukas,
wie Du auf das ; gekommen bist! wird mir wohl noch lange verschlossen bleiben.
Ich liebe simple Lösungen!
Möglicherweise hängt es mit Deinem Zitat zusammen
@mg123,
genau so, in dieser Art wollte ich es haben! Doch bevor ich das ein/umsetze muss ich noch einiges lernen.
Unreflektiert möchte ich das nicht veröffentlichen.
Besten Dank für Eure tollen Ideen, sagt... -
Obwohl ich HTML5, CSS, Java und PHP nicht wirklich lernen wollte, habt Ihr mich davon überzeugt, dass es ohne ein gewisses Grundwissen mit meiner WebSite nicht weiter geht.
Leider hat der audio-tag das Manko, dass er stoppt wenn der Event-Handler (heisst der so?) auf eine andere Seite wechselt.
Also habe ich mir angesehen wie das die Profis wie z.B. phonostar oder surfmusik mit ihren Playern machen, schliesslich bringt SmoothJazz ja auch einen eigenen kleinen Player mit. Warum also nicht benutzen?!
Die bescheidene Lösung (auch wenn sie nicht so elegant wie schlichtes an/aus ist) hat immerhin den Vorteil, der SJ-Player zeigt die Infos zu den laufenden Musikstücken an und die Musik läuft weiter selbst wenn man den Browser schliesst!
<a href="http://cloudrad.io/smoothjazz/player.html"
onclick="window.open(this.href, 'SJ', 'width=525, height=440, resizable=no, scrollbars=no, title=SJ'); return false;">
<img src="images/SmoothJazz.jpg" width="86" height="70">
</a>
Sorry, wenn ich hier doppelt gepostet habe, wollte das nur der Vollständigkeit halber noch anmerken. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
