开发单位网站直播流广播音乐播放器，点击播放按钮后音频无法播放

核心错误点 #

• 元素选择错误：playSound函数中错误选中了class为play的div按钮元素，而非id为sound的audio音频元素，div本身不存在音频播放相关的属性和方法
• 播放方法调用错误：自定义的mainkan()不是浏览器标准的音频播放方法，原生audio元素的播放方法为play()
• 冗余无效代码：函数末尾两段if语句仅获取了按钮元素未执行任何操作，属于无用代码
• 混合内容风险：当前直播流地址为HTTP协议，若你的站点部署在HTTPS域名下，浏览器会主动拦截HTTP资源加载导致无法播放，需将直播源替换为HTTPS协议地址

修复后的JavaScript代码 #

function playSound(sound) {
  // 正确获取audio元素
  var song1 = document.getElementById(sound);
  song1.volume = 0.5;
  if (song1.paused) {
    // 调用标准播放方法
    song1.play();
  } else {
    song1.pause();
  }
}

const play = document.querySelector('.play');
play.addEventListener('click', (e) => {
  e.target.classList.toggle('pause');
})

可选优化 #

如果不需要显示原生audio控件，可以将HTML中的audio标签修改为：

<audio id="sound" hidden>
  <source src="http://stream.zeno.fm/6hegrghq2p8uv">
</audio>

这样就只会显示你自定义的播放按钮样式。

内容的提问来源于stack exchange，提问作者Antonio Gunawan