Mac与iPad端音频控件显示差异及iPad端异常问题排查

我制作了一个包含曲目标表的网站，每行设有媒体播放器列。在Mac端Chrome中查看网站时一切正常，但在iPad（系统版本17.1.1）端Chrome中，audio控件显示异常：出现"Error"文本和AirPlay图标，且缺少音量控件。我希望移除iPad端的"Error"文本和AirPlay图标，确保播放/暂停、播放速度调节功能正常，若能恢复音量控件更佳。

两端控件显示差异 #

• Mac端音频控件：播放按钮、起止时间（如0:00/4:25）、音量图标、可调出播放速度选项的垂直椭圆按钮
• iPad端音频控件：播放按钮、"Error"文本、AirPlay图标、可调出播放速度选项的椭圆按钮

可查看图片了解显示差异：Mac、iPad和iPhone上音频控件的显示差异

注：点击暂停时计数器回到0:00是有意设置的。

调试疑问 #

我尝试用Mac调试（调试经验不足）：通过数据线连接iPad与Mac，两端均启用Web Inspector，打开Safari>Develop>我的iPad并输入网站URL，但该视图显示正常。请问此调试方法是否有误？

相关代码 #

HTML代码 #

<table id="myTable">           
   <th id="thSort" onclick="sortTable(0)">Key</th>
   <th id="thSort" onclick="sortTable(1)">Tune</th>
   <th id="Mp3Heading">Mp3</th>
   <tr>
      <td>C</td>
      <td>Acrobat's New Trick</td>
      <td>
         <audio class="myAudio" controls>
            <source src="Music/Acrobat's New Trick.mp3">
         </audio>                       
      </td>
   </tr>
   <tr>
      <td>D</td>
      <td>Across The Sea</td>
      <td>
         <audio class="myAudio" controls>
            <source src="Music/Across the Sea.mp3">
         </audio>
      </td>
   </tr>
   <tr>
      <td>C</td>
      <td>Altamont</td>
      <td>
         <audio class="myAudio" controls>
            <source src="Music/Altamont.mp3">
         </audio>
   </tr>

CSS代码 #

audio {
width: 300px;
height: 25px;
}

audio::-webkit-media-controls-panel {
background-color: #e6ebe5;
color: #e6ebe5;
}

音频元素脚本（暂停时重置播放进度） #

<script>
    const myAudio = document.getElementsByClassName ("myAudio");
    for (let i=0; i<myAudio.length; i++)
    myAudio[i].addEventListener("pause", (event) => {
        event.target.currentTime = 0;
    })    
</script> 

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