Why do the audio elements look different and have different features on Mac vs iPad?

Question

I made a website with a table of tunes, where each row has a column for a media player. Here's a link to the site: https://barb-elliott.github.io/TuneList/.

When I look at the website (in Chrome) on Mac it's fine, but on iPad it's different: it has the text "Error" and an airplay icon. I care most about how it works on the iPad and would like to get rid of the airplay icon and "Error" text in that context and make sure the play/pause and playback speed work, volume if possible.

On Mac it shows a play button, time beginning and end (0:00/4:25 e.g.) a volume icon, and vertical ellipse, which brings up the playback speed options.

On iPad (v. 17.1.1) it shows the play button, the text "Error", an airplay icon, and an ellipse icon, which brings up the playback speed options.

See the attached image if that helps.

how the audio controls look on Mac, iPad, and iPhone

NOTE: It's intentional that when you hit pause the counter goes back to 0:00.

So far I tried using my Mac to debug (I'm very inexpert at using the debugger) but it looked fine in that view. What I did specifically is I connected the iPad to my Mac with a cord (with Web Inspector enabled on both the Mac and iPad), opened Safari > Develop > my iPad, and typed my website URL into the address line. Was that the wrong way to go about it?

And here's code if that helps:

Below is what I did (in brief). What I expected was to have the control not have the "Error" text or the airplay button and for it to have a volume control in addition to the playback speed functionality.

Here's what I believe is the relevant 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>

Here's what I believe is the relevant CSS:

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

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

The only script I added for the audio element is this (to set the player back to the beginning once the user hits pause):

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