Opgelost Start Stop en stream url css / javascript

Aar · 9 jun 2024

Misschien gaat het in buffers beter?

PHP:

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// ICEcast stream URL
$stream_url = 'http://212.187.106.30:8000/HoefVinyl';

// Headers om de stream als audio/mpeg door te geven
header('Content-Type: audio/mpeg');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

// Open de stream
$stream = fopen($stream_url, 'r');

if ($stream === false) {
    die('Failed to open stream');
}

// Stuur de stream in stukken door naar de client
while (!feof($stream)) {
    echo fread($stream, 8192);
    ob_flush();
    flush();
}

fclose($stream);
?>

Hoefplan26 · 14 jun 2024

Mijn laatste poging om toch een werkende cassetteplayer te krijgen is toch via een pop-up.
Weet iemand hoe myFunction in het script kan koppelen aan de startStop van het cassette bandje.
Dus als ik op start klik komt de popup window naar http://212.187.106.30:8000/HoefVinyl
Een link naar de icecast server werkt wel gewoon in alle browsers dus moet ik het zo maar doen

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">Start</button>

<a href="#" onclick="myFunction()">HoefVinyl</a>

<script>

    var newwindow=null;

myFunction = function (){
 newwindow=window.open("http://212.187.106.30:8000/HoefVinyl",'HoefVinyl','height=200,width=200,top=10,left=10');
 setTimeout(resize_now, 4000);
}

function resize_now(){
  
   newwindow.moveTo(100,100);
   newwindow.resizeTo(800, 800);

}
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>

Aar · 14 jun 2024

Werkt het ook niet in buffers?

Hoefplan26 · 14 jun 2024

Helaas Aar dat ook niet sterker nog FF laat nu ook geen http naar https meer door. Ik zal moeten werken met een link naar de website via a href zoals je in het script kan zien nu moet de link alleen nog gekoppeld worden aan de startstop dan draait de cassetteband en via de popup luister je muziek.

Aar · 14 jun 2024

Maar wat als je de muziek dan in de popup stopt? Moet het bandje dan ook stoppen met draaien?

ICE-cast ondersteunt overigens ook SSL. Dus misschien is het handig om daarop te richten i.p.v. met popups te strooien die vaak afgeschoten worden door popup-blockers.

Hoefplan26 · 14 jun 2024

Ja dan moet het bandje draaien als ik op start klik en de pop up komt dan te voorschijn . Gezien ik thuis een windows pc heb staan met icecast is het onmogelijk hier een ssl verbinding van te maken. En het aantal luisteraars die ik heb spelen het of via de website of via een sonos systeem af en accepteren de popup.

Aar · 14 jun 2024

Het voelt een beetje als een houtje-touwtje oplossing, en het zal mij niks verbazen dat SSL in de (dichtbije) toekomst nog verder gepushed zal worden.

Waarom zou je niet voor een streaming via streamhoster kiezen? Meteen een all-in-one oplossing en de mogelijkheid voor 24/7 streaming?
Als je het tenminste goed wilt doen dan....

Jouw eigen verbinding gebruiken vind ik eerlijk gezegd een beetje tricky, en als het een beetje druk wordt kan het zomaar tegen de regels van je hosting in gaan (FUP).

Hoefplan26 · 14 jun 2024

Dat kan zijn maar het is voor een select aantal mensen dus ik maak me daar niet zo druk om maar ik hoop dat iemand mij met het script kan helpen.

Aar · 14 jun 2024

Volgens mij is het een kwestie om deze JavaScript-code in je myFunction (lekker duidelijke naam

) te plaatsen.

Code:

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";
}
});

Maar toch raad ik aan om mijn tips in het achterhoofd te houden.

Hoefplan26 · 14 jun 2024

Het zou mooi zijn idd als er geen muziek dat het bandje stopt met draaien
Het is misschien primitief maar ik ben er tevreden mee als er een popup komt en voor mijn luisteraars is het ook geen probleem

Aar · 14 jun 2024

Dus als je stream wordt afgebroken (door de bezoeker of server), dan moet het bandje stoppen met draaien? Dan moet je met AJAX of fetch in JavaScript pollen of de server nog benaderbaar is. Maar dan moet je met een hoop dingen rekening houden. Het afvangen of er op stop of pauze is gedrukt, lijkt me makkelijker.

Hoefplan26 · 16 jun 2024

Bij deze voor een ieder die ook zijn eigen radio speler wil hebben en gaat streamen van http naar https en niet geblokkeerd wordt omdat browser van http naar https blokkeren dit script.

Mocht nog iemand een idee heeft hoe je de popup kan verbergen dan is hij helemaal compleet.
Voor Aar en Bron bedankt voor jullie meedenken en om mij op weg te helpen

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" id="start" onclick="openWin()">Start</button>

<button class = "startStop" id="stop" onclick="closeWin()">Stop</button>

<script>

let myWindow;


function openWin() {

  myWindow = window.open("http://212.187.106.30:8000/HoefVinyl", "http://212.187.106.30:8000/HoefVinyl", "width=200,height=100",);

}


function closeWin() {

  myWindow.close();

}

  

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";

    myWindow.close();

  }

});

</script>

</body>

</html>

bron · 17 jun 2024

In JS laadt open() de url in een nieuwe of bestaande tab/venster/iframe, of het opent een popup als je dit opgeeft.

Op codepen staat een <audio> oplossing die prima werkt als de stream goed wordt aangeleverd.

Opgelost Start Stop en stream url css / javascript

Aar

Inventaris

Hoefplan26

Gebruiker

Aar

Inventaris

Hoefplan26

Gebruiker

Aar

Inventaris

Hoefplan26

Gebruiker

Aar

Inventaris

Hoefplan26

Gebruiker

Aar

Inventaris

Hoefplan26

Gebruiker

Aar

Inventaris

Hoefplan26

Gebruiker

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy