I'm playing a stream live radio mp3 media, but when the internet connection is disconnected, stream playing stops and never plays again even the internet connection is back.

I want to handle the connection and when the connection is disconnected, I need to show an alert with a message like 'your connection is disconnected, check and refresh the page' to the user.

How can I handle this with Javascript or C#?

I'm playing a stream live radio mp3 media, but when the internet connection is disconnected, stream playing stops and never plays again even the internet connection is back.

I want to handle the connection and when the connection is disconnected, I need to show an alert with a message like 'your connection is disconnected, check and refresh the page' to the user.

How can I handle this with Javascript or C#?

• javascript
• c#
• asp-core
• stream
• audio-streaming

• We will need a minimal reproducible example. – mjwills Commented Jan 17, 2021 at 10:49
• 1 Even if your internet connection never fully goes to "disconnected" status, there are still times when buffering may be unacceptably slow, and you need to do something in the UI. I'd encourage you to handle this more generically by looking at the network status and ready state of the media element itself. – Brad Commented Jan 22, 2021 at 20:51

2 Answers 2

Use the below snippet

1. Use chrome developer tools to put a browser on offline/online

window.addEventListener("offline", (event) => {
  const online = document.getElementById("online");
  const offline = document.getElementById("offline");
  online.style.display = "none";
  offline.style.display = "block";
});

window.addEventListener("online", (event) => {
  const online = document.getElementById("online");
  const offline = document.getElementById("offline");
  online.style.display = "block";
  offline.style.display = "none";
  setInterval(async() => {
    online.style.display = "none";
  }, 10000);
});

@import url("https://fonts.googleapis./css?family=Quicksand&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Quicksand;
  margin: 0;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #ffb457;
  transition: background-color var(--duration);
  -webkit-tap-highlight-color: transparent;
}

.alert-container {
  position: fixed;
  top: 0;
  width: 100%;
}

.alert {
  margin: 10px;
  padding: 10px;
  display: none;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 15px 5px #ccc;
}

.simple-alert {
  background-color: #ebebeb;
  border-left: 5px solid #6c6c6c;
}

.simple-alert .close {
  border-color: #6c6c6c;
  color: #6c6c6c;
}

.success-alert {
  background-color: #a8f0c6;
  border-left: 5px solid #178344;
}

.success-alert .close {
  border-color: #178344;
  color: #178344;
}

.danger-alert {
  background-color: #f7a7a3;
  border-left: 5px solid #8f130c;
}

.danger-alert .close {
  border-color: #8f130c;
  color: #8f130c;
}

.warning-alert {
  background-color: #ffd48a;
  border-left: 5px solid #8a5700;
}

.warning-alert .close {
  border-color: #8a5700;
  color: #8a5700;
}

<a href="https://www.freecodecamp/news/how-to-check-internet-connection-status-with-javascript/">
  Reference
</a>

<div class="alert-container">
  <div class="alert success-alert" id="online">
    <h4>Your device is connected to the internet.</h4>
  </div>

  <div class="alert danger-alert" id="offline">
    <h4>Your device lost its internet connection.</h4>
  </div>
</div>

You should check on javascript is server connected or not. then if client not connected with server, u can refresh the page.