172 lines
5.4 KiB
HTML
172 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Radio Stream Player</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #000;
|
|
color: #fff;
|
|
flex-direction: column;
|
|
}
|
|
.container {
|
|
text-align: center;
|
|
max-width: 90%;
|
|
width: 400px;
|
|
padding: 20px;
|
|
background: transparent;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
|
|
border: 1px solid #fff;
|
|
}
|
|
h1 {
|
|
margin-bottom: 10px;
|
|
font-size: 1.5rem;
|
|
}
|
|
select {
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
border: 1px solid #fff;
|
|
background-color: #333;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-top: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
audio, iframe {
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
display: none; /* Initially hidden */
|
|
}
|
|
iframe {
|
|
height: 250px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 15px;
|
|
}
|
|
h1 {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
iframe {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
h1 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 5px;
|
|
}
|
|
iframe {
|
|
height: 180px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Radio Stream Player</h1>
|
|
<select id="channelSelect">
|
|
<option value="off">OFF</option>
|
|
</select>
|
|
<audio id="audioPlayer" controls></audio>
|
|
<iframe id="streamIframe" src="about:blank" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
<script>
|
|
const channelSelect = document.getElementById('channelSelect');
|
|
const audioPlayer = document.getElementById('audioPlayer');
|
|
const streamIframe = document.getElementById('streamIframe');
|
|
|
|
// Fetch channels from channels.md
|
|
fetch('channels.md')
|
|
.then(response => response.text())
|
|
.then(text => {
|
|
const lines = text.split('\n');
|
|
lines.forEach(line => {
|
|
const [name, url] = line.split(',').map(item => item.trim());
|
|
if (name && url) {
|
|
const option = document.createElement('option');
|
|
option.value = url;
|
|
option.textContent = name;
|
|
channelSelect.appendChild(option);
|
|
}
|
|
});
|
|
})
|
|
.catch(error => console.error('Error loading channels.md:', error));
|
|
|
|
// Event listener for channel selection
|
|
channelSelect.addEventListener('change', function() {
|
|
const selectedUrl = this.value;
|
|
resetPlayer(); // Reset player before selecting the new channel
|
|
|
|
if (selectedUrl === 'off') return; // Do nothing if 'OFF' is selected
|
|
|
|
if (selectedUrl.endsWith('.m3u8')) {
|
|
playHLS(selectedUrl); // Play using HLS.js
|
|
} else if (selectedUrl.includes('crabdance.com')) {
|
|
streamIframe.src = selectedUrl;
|
|
streamIframe.style.display = 'block';
|
|
} else {
|
|
playAudio(selectedUrl); // Regular audio stream
|
|
}
|
|
});
|
|
|
|
// Function to reset and stop any ongoing media
|
|
function resetPlayer() {
|
|
if (!audioPlayer.paused) {
|
|
audioPlayer.pause();
|
|
audioPlayer.src = ''; // Clear the audio source
|
|
}
|
|
audioPlayer.style.display = 'none'; // Hide audio player
|
|
streamIframe.src = ''; // Clear iframe source
|
|
streamIframe.style.display = 'none'; // Hide iframe
|
|
}
|
|
|
|
// Function to play regular audio
|
|
function playAudio(url) {
|
|
audioPlayer.src = url;
|
|
audioPlayer.style.display = 'block'; // Show the audio player
|
|
audioPlayer.play().catch((error) => {
|
|
console.error('Error playing audio:', error);
|
|
});
|
|
}
|
|
|
|
// Function to play HLS stream using Hls.js
|
|
function playHLS(url) {
|
|
if (Hls.isSupported()) {
|
|
const hls = new Hls();
|
|
hls.loadSource(url);
|
|
hls.attachMedia(audioPlayer);
|
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
audioPlayer.style.display = 'block';
|
|
audioPlayer.play().catch((error) => {
|
|
console.error('Error playing HLS stream:', error);
|
|
});
|
|
});
|
|
} else {
|
|
alert('HLS is not supported in your browser');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|