如何将HTML的<audio controls>与JS alert结合，实现点击按钮弹出带音频播放器的提示框？

原生alert()是浏览器调用系统级的弹窗组件，仅支持渲染纯文本内容，不支持解析任何HTML标签，也无法嵌入<audio controls>播放器，所以你预想的直接结合alert的方案无法实现。
另外额外补充：JS中音频实例化的标准写法是const song = new Audio()，构造函数名首字母必须大写，小写的new audio()会抛出未定义错误。

你可以用HTML+CSS+JS手写自定义弹窗，完全模拟alert的交互体验，同时内置音频播放器，实现你要的效果，完整可运行代码如下：

<!-- HTML结构 -->
<button id="openModalBtn">点击弹出带播放器的提示</button>

<!-- 自定义模态框 默认隐藏 -->
<div id="audioModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px; border-radius: 8px; min-width: 300px;">
    <p>提示内容：你可以播放下方音频</p>
    <!-- 内置音频播放器 -->
    <audio id="targetAudio" controls src="替换为你的音频文件地址.mp3"></audio>
    <div style="text-align: right; margin-top: 15px;">
      <button id="closeModalBtn">确定</button>
    </div>
  </div>
</div>

// JS交互逻辑
const openBtn = document.getElementById('openModalBtn')
const modal = document.getElementById('audioModal')
const closeBtn = document.getElementById('closeModalBtn')
const audio = document.getElementById('targetAudio')

// 点击按钮弹出弹窗
openBtn.addEventListener('click', () => {
  modal.style.display = 'block'
  // 可选配置：弹出时自动加载/播放音频，自动播放需要符合浏览器媒体策略要求
  audio.load()
  // audio.play() 
})

// 点击确定关闭弹窗，同时重置音频状态
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none'
  audio.pause()
  audio.currentTime = 0
})

如果你不想手动写样式，也可以用任意前端UI框架的模态框组件，只需要把<audio controls>放到模态框的内容区域即可，逻辑和上述方案完全一致。

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