Start Stop en stream url css / javascript

Hoefplan26 · 17 mei 2024

Ik heb een radiostation die uitzend op internet met muziek uit de jaren 60, 70 en 80
Om mijn stream te luisteren klik je op een standaard audio speler die vervolgens mijn stream afspeelt.
De standaard mediaspeler zijn niet echt leuk om op mijn website te plaatsen, daarom ben ik zelf aan de gang gegaan en heb een cassette gemaakt waarbij de wieltjes draaien op een css script.
Het lukt mij niet om een script te maken waarbij je op een play knop drukt en dan de wieltjes gaan draaien.
En als ze draaien dat dan mijn stream url wordt afgespeeld.
Is er iemand die mij hierbij kan helpen.

Aar · 17 mei 2024

Kan je jouw script hier in een codeblok delen i.p.v. een bijlage?
je kan deze ook tegelijkertijd op JSfiddle plaatsen zodat we een werkend/zichtbaar voorbeeld hebben.

Hoefplan26 · 17 mei 2024

Bij deze de code

CSS:

<
!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  img{float:left;}
.leftwheel {
    -webkit-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}


.rightwheel {
    -webkit-animation: rotation1 2s infinite linear;
    animation: rotation1 2s infinite linear;
  -moz-animation: rotation1 2s infinite linear;
}

@-webkit-keyframes rotation1 {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation1 {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation1 {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}
.leftwheel{
    
top: 82px; left: 10px;
}
.rightwheel{
    
top: 82px; left: 121px;
}
.positie{
top: 8px; left: 320px;
}
</style>
</head>
<body>

<img class="leftwheel" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje1.png">
 
  <img class="rightwheel" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje2.png">
</body>
</html>

Hoefplan26 · 17 mei 2024

Bij deze de code toegevoegd en een account aangemaakt bij jsfiddle moet alleen even ontdekken hoe ik daar het werkende script kan opslaan zodat er mee gekeken kan worden.
Bedankt voor de tip
De link naar fiddle is https://jsfiddle.net/Hoefplan26/t7c2w14f/1/#&togetherjs=cJK7TypifM

bron · 23 mei 2024

Om een idee te geven hoe je een start/stop knop erbij kan zetten. Dit kan met JavaScript. Alles integreren in je website met de url van je stream kan lastiger zijn. Hier een codepen.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cassette</title>
<style>
img{
  float:left;
}
.leftwheel{
  top: 82px;
  left: 10px;
}
.rightwheel{
  top: 82px;
  left: 121px;
}
.leftwheel,
.rightwheel {
  -webkit-animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
  animation: rotation 2s infinite linear;
}
.leftwheel.animNone,
.rightwheel.animNone {
  animation-name: none;
}
@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
  from {-moz-transform: rotate(0deg);}
  to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
  from {transform: rotate(0deg);}
  to   {transform: rotate(359deg);}
}
</style> 
</head>
<body>
<img class="leftwheel animNone" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje1.png">
<img class="rightwheel animNone" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje2.png">
<br><br><br>
<button class="startStop" type="button">Start</button>
<script>
let leftwheel  = document.querySelector(".leftwheel");
let rightwheel = document.querySelector(".rightwheel");
let startStop  = document.querySelector(".startStop");
startStop.addEventListener("click", function() {
  if ( leftwheel.classList.contains("animNone") ) {
    leftwheel.classList.remove("animNone");
    rightwheel.classList.remove("animNone");
    startStop.innerHTML = "Stop";
  } else {
    leftwheel.classList.add("animNone");
    rightwheel.classList.add("animNone");
    startStop.innerHTML = "Start";
  }
});
</script>
</body>
</html>

Hoefplan26 · 25 mei 2024

Hier ben ik al heel.blij mee bedankt hiervoor. Er is vast iemand die weet hoe het lukt om ook de stream af te spelen. Maar de basis is er

Op mijn website klik ik op een afbeelding en er verschijnt een popup die de stream afspeelt

HTML:

<a href="http://212.187.106.30:8000/HoefVinyl.mp3" target="popup" onclick="window.open('http://212.187.106.30:8000/HoefVinyl','popup','width=300,height=187'); return false;" rel="noopener">
<img class="aligncenter" style="width: 367px; height: 424px;" src="https://www.mulasquez.nl/wp-content/uploads/2023/04/technics-sl-1900.png" />
</a>

Als deze geimplementeerd kan worden in het script hierboven maar als je er op klikt dat er geen popup komt maar gewoon de stream afspeelt met het draaiende bandje zou het helemaal compleet zijn.

bron · 5 jun 2024

Hoefplan26 zei:
Er is vast iemand die weet hoe het lukt om ook de stream af te spelen.

Vanmiddag een snippet gemaakt.

HTML:

<div id="player">
<audio controls preload="none">
<source src="" type="audio/mpeg">
</audio>
</div>

<div id="streams">

<a class="stream" href="https://playerservices.streamtheworld.com/api/livestream-redirect/RADIO10.mp3">
<img src="https://static.mytuner.mobi/media/radios-150px/6H4dvDjjST.png" width="100" height="100" alt="">
</a>

<a class="stream" href="https://playerservices.streamtheworld.com/api/livestream-redirect/SKYRADIO.mp3">
<img src="https://static.mytuner.mobi/media/radios-150px/FBShfnjhkn.png" width="100" height="100" alt="">
</a>

<a class="stream" href="https://mcp-1.streampanel.nl:8020/lxclassics_mp3">
<img src="https://static.mytuner.mobi/media/radios-150px/s92agjytzthr.jpeg" width="100" height="100" alt="">
</a>

<a class="stream" href="https://www.chosic.com/wp-content/uploads/2021/01/fm-freemusic-inspiring-optimistic-upbeat-energetic-guitar-rhythm(chosic.com).mp3">
<img src="https://www.mulasquez.nl/wp-content/uploads/2023/04/technics-sl-1900.png" width="100" height="100" alt="">
</a>

</div>

CSS:

#streams img {
    height: auto;
    border: 0;
}
#streams .stream {
    display: inline-block
}
/* Volgende regel weg als je <audio> wilt zien */
#player { display: none }

JavaScript:

let audio   = document.querySelector("#player audio");
let source  = document.querySelector("#player source");
let streams = document.querySelectorAll("#streams .stream");
for (let i=0; i<streams.length; i++) {
  streams[i].addEventListener("click", function(e) {
    e.preventDefault();
    source.src = this.href;
    audio.load();
    audio.play();
  });
}

Hoefplan26 · 7 jun 2024

Het script werkt nu althans in firefox. bij Microsoft edge niet ook niet als ik audio controls inschakel , deze standaard audio speler blijft grijs helaas. Heeft iemand nog een optie dat hij in beide browsers werkt?

HTML:

<!DOCTYPE html>
<html>
<head>
<style>

img{
  float:left;
}
.leftwheel{
  top: 82px;
  left: 10px;
}
.rightwheel{
  top: 82px;
  left: 121px;
}
.leftwheel,
.rightwheel {
  -webkit-animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
  animation: rotation 2s infinite linear;
}
.leftwheel.animNone,
.rightwheel.animNone {
  animation-name: none;
}
@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
  from {-moz-transform: rotate(0deg);}
  to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
  from {transform: rotate(0deg);}
  to   {transform: rotate(359deg);}
}

</style>
</head>
<body>
<img class="leftwheel animNone" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje1.png">
<img class="rightwheel animNone" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje2.png">
<br><br><br>
<button class="startStop" type="button">Luister</button>

<audio id="myAudio">
  <source src="HoefVinyl" type="audio/ogg">
  <source src="    http://212.187.106.30:8000/HoefVinyl" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<script>
var x = document.getElementById("myAudio");

function playAudio() {
  x.play();
}

function pauseAudio() {
  x.pause();
}
let leftwheel  = document.querySelector(".leftwheel");
let rightwheel = document.querySelector(".rightwheel");
let startStop  = document.querySelector(".startStop");
startStop.addEventListener("click", function playAudio() {
 x.play();
  if ( leftwheel.classList.contains("animNone") ) {
    leftwheel.classList.remove("animNone");
    rightwheel.classList.remove("animNone");
          startStop.innerHTML = "Stop";
  } else {
    leftwheel.classList.add("animNone");
    rightwheel.classList.add("animNone");
         startStop.innerHTML = "Start";
    x.pause();
  }
});
</script>

</body>
</html>

Aar · 7 jun 2024

Dat moet gewoon werken:

"audio" | Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

Of je moet een hele oude browser hebben uit het jaar kruik.
Ik denk dat die overtollige spaties voor je stream-URL het probleem zijn.

bron · 7 jun 2024

Vandaag krijg ik een NET::ERR_CERT_DATE_INVALID bij
uploads/2023/04/technics-sl-1900.png

"Deze server kan niet bewijzen dat het www.mulasquez.nl is. Het beveiligingscertificaat is gisteren verlopen. Dit kan worden veroorzaakt door een onjuiste configuratie of door een aanvaller die uw verbinding onderschept."

Hoefplan26 · 7 jun 2024

Maar het betreft om www.hoefvinyl.nl

bron · 7 jun 2024

Oops, ik had een verkeerd linkje (werkte goed bij het testen). Als ik ergens een momentje heb zal ik ze bij elkaar zetten.

bron · 7 jun 2024

Op die ene pagina heb je html code voor twee pagina's staan. Je mag slechts 1 <head> en 1 <body> sectie hebben.

Deze oude code staat er nog in, kan eruit

HTML:

<a href="http://212.187.106.30:8000/HoefVinyl.mp3" target="popup"
onclick="window.open('http://212.187.106.30:8000/HoefVinyl','popup','width=300,height=187'); return false;"
rel="noopener">luister hier</a>

Hoefplan26 · 7 jun 2024

De code is er uit maar het gaat om dit script, als ik deze open in firefox dan speelt het cassettebandje muziek die ik live stream op het moment dat ik op start druk en stopt deze als ik op stop druk . Open ik de website in microsoft edge dan draait het bandje wel maar hoor ik mijn live stream niet dit heeft waarschijnlijk te maken met een beveiliging in edge maar ook in chrome want op de telefoon draait ook het bandje maar hoor je niets. Met de code hierboven opent hij een popup en speelt dan wel af in edge en op de browser van de telefoon.

Hieronder doe ik de code die wel werkt in firefox maar niet in edge

HTML:

<!DOCTYPE html>
<html>
<head>
<style>

img{
  float:left;
}
.leftwheel{
  top: 82px;
  left: 10px;
}
.rightwheel{
  top: 82px;
  left: 121px;
}
.leftwheel,
.rightwheel {
  -webkit-animation: rotation 2s infinite linear;
  -moz-animation: rotation 2s infinite linear;
  animation: rotation 2s infinite linear;
}
.leftwheel.animNone,
.rightwheel.animNone {
  animation-name: none;
}
@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
  from {-moz-transform: rotate(0deg);}
  to   {-moz-transform: rotate(359deg);}
}
@keyframes rotation {
  from {transform: rotate(0deg);}
  to   {transform: rotate(359deg);}
}

</style>
</head>
<body>
<img class="leftwheel animNone" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje1.png">
<img class="rightwheel animNone" src="https://www.hoefvinyl.nl/wp-content/uploads/2024/05/wieltje2.png">
<br><br><br>
<button class="startStop" type="button">Luister</button>

<audio id="myAudio">
  <source src="HoefVinyl" type="audio/ogg">
  <source src="http://212.187.106.30:8000/HoefVinyl" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<script>
var x = document.getElementById("myAudio");

function playAudio() {
  x.play();
}

function pauseAudio() {
  x.pause();
}
let leftwheel  = document.querySelector(".leftwheel");
let rightwheel = document.querySelector(".rightwheel");
let startStop  = document.querySelector(".startStop");
startStop.addEventListener("click", function playAudio() {
 x.play();
  if ( leftwheel.classList.contains("animNone") ) {
    leftwheel.classList.remove("animNone");
    rightwheel.classList.remove("animNone");
          startStop.innerHTML = "Stop";
  } else {
    leftwheel.classList.add("animNone");
    rightwheel.classList.add("animNone");
         startStop.innerHTML = "Start";
    x.pause();
  }
});
</script>

</body>
</html>

bron · 8 jun 2024

Als het in FF werkt dan voldoet FF niet aan de W3C standaard

of het is een bug in FF. Hier zie ik dat je AAC+ (AACP) gebruikt in plaats van MP3.

Kan je alles weghalen en alleen het volgende testen?

HTML:

<audio controls>
<source src="http://212.187.106.30:8000/HoefVinyl" type="audio/mp4">
</audio>

Hoefplan26 · zondag om 08:40

Geprobeerd maar in Edge blijft de player grijs, maar hier ligt het probleem:
Browsers no longer accept mixed requests. It means you can't play an HTTP stream on an HTTPS website.
Firefox staat het nog toe maar Edge niet meer wat wel lukt is om gewoon een link te maken via a href dus naar http://212.187.106.30:8000/HoefVinyl. Zie de link luisteren op de site www.hoefvinyl.nl.
Echter opent hij dan een nieuwe pagina met een audio player. De truc zou zijn om deze pagina dan te verbergen dus als startknop open window en hide en stop is close window maar waarschijnlijk gaat dat niet lukken.
Of ik moet mijn audio stream van icecast ssl maken. Deze draait op mijn eigen windows pc en hoe dat moet daar heb ik totaal geen kaas van gegeten,

Aar · zondag om 08:57

Waar loop je op vast om IceCast via SSL te draaien?

Welke webserver draai je op je Windows computer? En hangt daar ook een domein aan vast, wat verplicht is voor SSL?

Of heb je elders een webserver draaien op een server met eigen beheer (geen shared-hosting omgeving)?

Hoefplan26 · zondag om 11:01

Ik heb thuis een windows computer en daarop icecast geïnstalleerd van icecast gaat het naar deva db91tx kastje die het analoge signaal omzet naar digitaal. Dus geen domein maar gewoon een stream url voor mij dus onmogelijk om een ssl beveiliging te maken. Het enige wat dus overblijft is een directe link

Aar · zondag om 11:20

Er zijn zeker wel mogelijkheden. Jouw website, is die webserver in eigen beheer?
Dan kan je een proxy schrijven, SSL eraan koppelen en klaar is @Hoefplan26 .

Je kan in je DNS van jouw websitedomein een A-record kunnen aanmaken met de naam 'streaming' die je naar jou ip-adres van je ICEcast server verwijst. Dan heb je in ieder geval al streaming.hoefvinyl.nl als domein. Een mooi begin voor SSL.

Kortom: De SSL zit hem buiten ICEcast.

Hoefplan26 · zondag om 11:58

MIjn website is gehost bij een hostingbedrijf web-oke en die is beveiligd met ssl. Thuis heb ik een gewone desktopcomputer met daarop icecast geinstalleerd en poort 8000 opengezet in mijn router dan heb ik gewoon een link naar mijn thuis computer geplaatst http://212.187.106.30:8000/HoefVinyl dus de stream is niet ssl. Als ik de stream via de website hoefvinyl met een link a href (gewoon een link naar mijn icecast thuis computer) maak opent hij een venster en wordt de stream afgespeeld maar zodra ik <audio controls> source scr"http://212.187.106.30:8000/HoefVinyl"</>invoer dan blijft het audio element grijs.
Als u de oplossing weet hoe ik de stream https kan maken dan zou het probleem denk ik opgelost zijn.

Start Stop en stream url css / javascript

Gebruiker

Bijlagen

Inventaris

Gebruiker

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Inventaris

Moderator

Gebruiker

Moderator

Moderator

Gebruiker

Moderator

Gebruiker

Inventaris

Gebruiker

Inventaris

Gebruiker

Wij waarderen jouw privacy