为什么在台式机上设置currentTime而不在移动设备上设置currentTime？

Question

我目前正在使用.currentTime设置音频开始播放之前的时间的项目。我在桌面浏览器上测试了该功能，并且效果很好。但是，我意识到它不适用于我的iOS移动设备。相反，歌曲从头开始。

我在论坛和其他站点上进行了无休止的阅读，看到我在玩.oncanplay，.oncanplaythrough，.onloadeddata和.onloadedmetadata。无济于事。

当我用.oncanplay / canplaythrough函数包装播放功能时，声音变得静止且听不见。这是我的JSFiddle：https://jsfiddle.net/manoj1234/30g2qefk/14/谢谢。

JS：

window.onload = () =>{
const firstSong = document.getElementsByClassName("cueBox");
const numOfTracks = document.getElementById("span");

djPage.style.display = "flex";

const djJerms = document.getElementById("djJerms");


    djJerms.currentTime = 329;

    djJerms.play();


    /* TRACK ONE HIDE */

    setTimeout(() => {
        firstSong[0].style.opacity = "0";
    }, 2000);


    setTimeout(() => {
        firstSong[0].style.transform = "translateX(100%)";
    }, 2000);

    setTimeout(() => {
        firstSong[0].style.height = "0px";
        firstSong[0].style.marginBottom = "0px";
        numOfTracks.innerHTML = "2 tracks";

    }, 2500);

    setTimeout(() => {
        firstSong[0].style.display = "none";
    }, 4000);

    /* END OF TRACK ONE HIDE */


    /* TRACK TWO HIDE */

    
    djJerms.ontimeupdate = () => {

        console.log(djJerms.currentTime);

        if (djJerms.currentTime >= 365) { //365

            setTimeout(() => {
                firstSong[1].style.opacity = "0";
            }, 2000);


            setTimeout(() => {
                firstSong[1].style.transform = "translateX(100%)";
            }, 2000);

            setTimeout(() => {
                firstSong[1].style.height = "0px";
                firstSong[1].style.marginBottom = "0px";
                numOfTracks.innerHTML = "1 track";

            }, 2500);

            setTimeout(() => {
                firstSong[1].style.display = "none";
            }, 4000);

            /* END OF TRACK TWO HIDE */

        }
        
        /* TRACK OF TWO HIDE */

         if (djJerms.currentTime > 403) { //403

                setTimeout(() => {
                    firstSong[2].style.opacity = "0";
                }, 2000);


                setTimeout(() => {
                    firstSong[2].style.transform = "translateX(100%)";
                }, 2000);

                setTimeout(() => {
                    firstSong[2].style.height = "0px";
                    firstSong[2].style.marginBottom = "0px";
                    numOfTracks.innerHTML = "0 tracks";

                }, 2500);

                setTimeout(() => {
                    firstSong[2].style.display = "none";
                }, 4000);

                /* END OF TRACK TWO HIDE */

            }
        
      }


    }

CSS：

#djPage{

overflow-x: hidden;

width:100%;
background-color:#191414;

display: flex;
padding-top:100px;
align-items: center;
flex-direction: column;
/*padding-bottom: 130px;*/
display: none;
transition: ease-in-out 0.2s;
z-index: 2000;

#liveContainer{
display: flex;
justify-content: center;
align-items: center;

}

figure{
margin-bottom: 0px;
}


@keyframes grow {
0%   {
    transform: scale(0.5,0.5)
}

50%  {
    transform: scale(1,1);
}

100% {
    transform: scale(0.5,0.5);
    }
 }

#circleBottom{
height:16px;
width:16px;
background-color:#1DB954;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
animation: grow infinite 1s;
margin-right: 8px;
}

#circleTop{
height:50%;
width:50%;
background-color:#1ed760;
border-radius: 100%;
}


h1{
color:white;
font-family: circular;
margin-top:10px;
margin-bottom:50px;
font-size:1.4em;
}

h4{
color:white;
font-family: circular;
font-size: 0.9em;
letter-spacing: -1.5px;
}

p{
color:white;
align-self: flex-start;
margin-left: 25px;
margin-bottom: 20px;
font-family: circular;
font-size: 0.9em;
}

#cueContainer,#userCueContainer{
width:100%;
}

#span{
font-weight: bold;
}


#cueContainer{



h3{
    font-family: circular;
    font-size: 0.95em;
}

p{
    color: grey;
font-size: 0.9em;
font-weight: normal;
margin-left: 0;
}
}




.cueBox{
height:70px;
width:100%;
display: flex;
align-items: center;
margin-bottom: 20px;
padding-left:25px;
color:white;
transition: ease-in-out 0.8s;
}

.cueBoxImg{
height:70px;
width:70px;
margin-right: 20px;
object-fit: cover;
border-radius: 5px;
}

#userCueContainer{

button{
    background-color:#1DB954;
    padding-left:20px;
    padding-right:20px;
    padding-top:12px;
    padding-bottom:12px;
    border-radius:50px;
    border:0;
    color:white;
    font-family: 'circular';
    text-transform: uppercase;
    font-weight: bold;
    font-size:0.8em;
}
}



}

HTML：

<audio id="djJerms">
<source src="https://www.mboxdrive.com/djjerms.mp3" type="audio/mpeg">
</audio>


<figure>
    <img id="djCover" src="https://image.shutterstock.com/image-vector/male-silhouette-avatar- 
profile-picture-260nw-199246382.jpg" draggable="false">
</figure>

<div id="liveContainer">

    <div id="circleBottom">
        <div id="circleTop"></div>
    </div>
    <h4>LIVE</h4>

</div>

<h1>DJ Jerms</h1>

<p>Queued tracks playlist <span id="span">3 tracks</span></p>

<div id="cueContainer">

    <div class="cueBox">
        <img class="cueBoxImg" src="https://image.shutterstock.com/image-vector/male-silhouette- 
  avatar-profile-picture-260nw-199246382.jpg">

        <div>
            <h3>Song 1</h3>
            <p>Arist </p>
        </div>

    </div>


    <div class="cueBox">
        <img class="cueBoxImg" src="https://image.shutterstock.com/image-vector/male-silhouette- 
avatar-profile-picture-260nw-199246382.jpg">

        <div>
            <h3>Song 2</h3>
            <p>Artist  </p>
        </div>

    </div>


    <div class="cueBox">
        <img class="cueBoxImg" src="https://image.shutterstock.com/image-vector/male-silhouette- 
avatar-profile-picture-260nw-199246382.jpg">

        <div>
            <h3>Song 3</h3>
            <p>Artist </p>
        </div>

    </div>




</div>


<div id="userCueContainer">

    <p>Your Queue</p>

    <div class="cueBox">

       <button>Request</button>

    </div>


</div>