我的下一个挑战是建立一个直播广播电台。
我熟悉 HTML5 的
<audio>我所有的创立都差不多有5年了（如下所列），所以我想我可能会错过一些东西， 或者只是人们不再听在线广播电台了？！
设置Html5音频广播播放器。
本教程使用 jPlayer（一个 jQuery 库）和 Icecast（一个用于流媒体的免费服务器），但这篇文章已经有 7 年历史了。
有人对如何开始解决这个问题有更好的线索吗？
可能不是你想要的答案，但几年前我用 Icecast 做了这个，它工作得很好，而且不太难，也不太不灵活，无法融入现代网页。它给了我一个正确格式的实时音频流（我认为是 m3u）。至于如何呈现该流，这将更加面向网页设计，但您可以在网络服务器中打开来自 Icecast 的链接，因此这不像您试图将方形钉子放入圆形中无论icecast吐出什么，这都不是一个晦涩的标准。
我建议先设置 Icecast 并让流工作，然后再处理网络播放器方面的问题。也许有比icecast更新的东西，但它的工作很好。
您可以使用此代码进行音量收音机静音和所有其他操作，但可以从您的电脑上进行直播，我不确定此代码是否得到了很好的优化，我没有尝试，因为它有效
const radio = document.getElementById("radiolink"); //Your radio/audio id:
const playbtn = document.getElementById("playbtn"); //play btn id:
const mutebtn = document.getElementById("mutebtn"); //mutebtn id:
let volumei = document.getElementById("audioslide"); //the voleme input slider:
let volume ; //a volume variable:
let playing = false; //variable if its playing or not:
let mute = false; //variable if its mute or not:
playbtn.onclick = function(){
playing = !playing; //changes the variable to oposite
if(playing == true){
radio.play();
console.log(playing);
playbtn.className = "fa-solid fa-pause"
}
else if(playing == false){
radio.pause();
playbtn.className = "fa-solid fa-play"
playing = false;
}
else{
console.log('error');
}
}
mutebtn.onclick = function(){
mute = !mute //changes the variable to oposite
}
setInterval(volumef, 100); //runs volumef function every 100ms
function volumef(){
volume = volumei.value / 10 //take the data from the volume slider thats from 1 to 10 and divides by ten to get the radio ones from 0.0 to 1.0
console.log(volume);
if(volume > 0 && !mute ){
mutebtn.className = "fa-solid fa-volume-high"
radio.volume = volume; //it will make the volume the value of the volume thats at the start of this function
}
else if(volume == 0 || mute == true){
mutebtn.className = "fa-solid fa-volume-off"
radio.volume = 0; //it will set the radio volume to 0
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="put your font awesome link from their website for the icons to work" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div id="radio">
<button id="playbtn" class="fa-solid fa-play "></button>
<button id="mutebtn" class="fa-solid fa-volume-high"></button>
<audio id="radiolink">
<source src="your radio link example: http://zuicast.digitalag.ro:9420/zu">
</audio>
<div id="audioslider">
<input type="range" min="0" max="10" value="10" id="audioslide">
</div>
</div>
<script src="radio.js"></script>
</body>
</html>