javascript - 带有大量预加载音频的 Chrome 移动错误

Question

[干预] 阻止创建 WebMediaPlayer 的尝试，因为已经存在太多 WebMediaPlayer。见 crbug.com/1144736#c27

我正在创建一个 pwa 网站，它的功能更像是一个应用程序，而不是一个网站。当我尝试在我的 html 中放置超过 40 个音频元素以进行预加载时，会发生此错误。我正在预加载音频，因为它是一堆我想立即播放而不是加载然后播放的小 sfx。Chrome mobile 是唯一一个似乎与我的代码有问题的浏览器。当我尝试从引发此错误的元素播放音频时，音频承诺保持未决状态。这不是开发早期的问题，我不确定它为什么会改变。以下是一些相关的片段：

<audio id="crowd400" preload="auto" hidden>         <source src="audio/crowd400.mp3" type="audio/mpeg"></audio>
<audio id="crowd450" preload="auto" hidden>         <source src="audio/crowd450.mp3" type="audio/mpeg"></audio>
<audio id="crowd500" preload="auto" hidden>         <source src="audio/crowd500.mp3" type="audio/mpeg"></audio>
<audio id="intro song" preload="auto" hidden>       <source src="audio/intro.mp3" type="audio/mpeg"></audio>
<audio id="outro song" preload="auto" hidden>       <source src="audio/outro.mp3" type="audio/mpeg"></audio>
<audio id="start game" preload="auto" hidden>       <source src="audio/soulful.mp3" type="audio/mpeg"></audio>
<audio id="soda" preload="auto" hidden>             <source src="audio/soda.mp3" type="audio/mpeg"></audio>
<audio id="tunes0" preload="auto" hidden>           <source src="audio/win.mp3" type="audio/mpeg"></audio>
<audio id="losers" preload="auto" hidden>           <source src="audio/trombone.mp3" type="audio/mpeg"></audio>
<audio id="jackpot" preload="auto" hidden>          <source src="audio/jackpot.mp3" type="audio/mpeg"></audio>
<audio id="winners" preload="auto" hidden>          <source src="audio/loud.mp3" type="audio/mpeg"></audio>
<audio id="winner" preload="auto" hidden>           <source src="audio/normal.mp3" type="audio/mpeg"></audio>
<audio id="drumroll" preload="auto" hidden>         <source src="audio/drumroll.mp3" type="audio/mpeg"></audio>
<audio id="gargling" preload="auto" hidden>         <source src="audio/gargling.mp3" type="audio/mpeg"></audio>
<audio id="car" preload="auto" hidden>              <source src="audio/car.mp3" type="audio/mpeg"></audio>
<audio id="hiss0" preload="auto" hidden>            <source src="audio/hiss0.mp3" type="audio/mpeg"></audio>
<audio id="hiss1" preload="auto" hidden>            <source src="audio/hiss1.mp3" type="audio/mpeg"></audio>
<audio id="fart0" preload="auto" hidden>            <source src="audio/fart0.mp3" type="audio/mpeg"></audio>
<audio id="fart1" preload="auto" hidden>            <source src="audio/fart1.mp3" type="audio/mpeg"></audio>
<audio id="fart2" preload="auto" hidden>            <source src="audio/fart2.mp3" type="audio/mpeg"></audio>
<audio id="fart3" preload="auto" hidden>            <source src="audio/fart3.mp3" type="audio/mpeg"></audio>
<audio id="fart4" preload="auto" hidden>            <source src="audio/fart4.mp3" type="audio/mpeg"></audio>
<audio id="fart5" preload="auto" hidden>            <source src="audio/fart5.mp3" type="audio/mpeg"></audio>
<audio id="fart6" preload="auto" hidden>            <source src="audio/fart6.mp3" type="audio/mpeg"></audio>
<audio id="fart7" preload="auto" hidden>            <source src="audio/fart7.mp3" type="audio/mpeg"></audio>
<audio id="fart8" preload="auto" hidden>            <source src="audio/fart8.mp3" type="audio/mpeg"></audio>
<audio id="fart9" preload="auto" hidden>            <source src="audio/fart9.mp3" type="audio/mpeg"></audio>
<audio id="fart10" preload="auto" hidden>           <source src="audio/fart10.mp3" type="audio/mpeg"></audio>
<audio id="fart11" preload="auto" hidden>           <source src="audio/fart11.mp3" type="audio/mpeg"></audio>
<audio id="fart12" preload="auto" hidden>           <source src="audio/fart12.mp3" type="audio/mpeg"></audio>
<audio id="fart13" preload="auto" hidden>           <source src="audio/fart13.mp3" type="audio/mpeg"></audio>
<audio id="fart14" preload="auto" hidden>           <source src="audio/fart14.mp3" type="audio/mpeg"></audio>
<audio id="fart15" preload="auto" hidden>           <source src="audio/fart15.mp3" type="audio/mpeg"></audio>
<audio id="fart16" preload="auto" hidden>           <source src="audio/fart16.mp3" type="audio/mpeg"></audio>
<audio id="fart17" preload="auto" hidden>           <source src="audio/fart17.mp3" type="audio/mpeg"></audio>
<audio id="fart18" preload="auto" hidden>           <source src="audio/fart18.mp3" type="audio/mpeg"></audio>
<audio id="fart19" preload="auto" hidden>           <source src="audio/fart19.mp3" type="audio/mpeg"></audio>
<audio id="fart20" preload="auto" hidden>           <source src="audio/fart20.mp3" type="audio/mpeg"></audio>
<audio id="fart21" preload="auto" hidden>           <source src="audio/fart21.mp3" type="audio/mpeg"></audio>
<audio id="fart22" preload="auto" hidden>           <source src="audio/fart22.mp3" type="audio/mpeg"></audio>
<audio id="Puppy Crying" preload="auto" hidden>     <source src="audio/puppy.mp3" type="audio/mpeg"></audio>
<audio id="Kitten Meow" preload="auto" hidden>      <source src="audio/kitten.mp3" type="audio/mpeg"></audio>
<audio id="Male Scream No 1" preload="auto" hidden> <source src="audio/no1.mp3" type="audio/mpeg"></audio>
<audio id="Male Scream No 2" preload="auto" hidden> <source src="audio/no2.mp3" type="audio/mpeg"></audio>
<audio id="Evil Clown Laugh" preload="auto" hidden> <source src="audio/clown.mp3" type="audio/mpeg"></audio>
<audio id="Bassoon" preload="auto" hidden>          <source src="audio/bassoon.mp3" type="audio/mpeg"></audio>
<audio id="Dragon" preload="auto" hidden>           <source src="audio/dragon.mp3" type="audio/mpeg"></audio>
<audio id="Burp" preload="auto" hidden>             <source src="audio/burp.mp3" type="audio/mpeg"></audio>
<audio id="Comedy Wah Wah 1" preload="auto" hidden> <source src="audio/comedy1.mp3" type="audio/mpeg"></audio>
<audio id="Comedy Wah Wah 2" preload="auto" hidden> <source src="audio/comedy2.mp3" type="audio/mpeg"></audio>
<audio id="Heartbeat" preload="auto" hidden>        <source src="audio/heartbeat.mp3" type="audio/mpeg"></audio>
<audio id="Clock" preload="auto" hidden>            <source src="audio/clock.mp3" type="audio/mpeg"></audio>
<audio id="Deep Evil Hover 1" preload="auto" hidden><source src="audio/deep1.mp3" type="audio/mpeg"></audio>
<audio id="Deep Evil Hover 2" preload="auto" hidden><source src="audio/deep2.mp3" type="audio/mpeg"></audio>
<audio id="Deep Evil Hover 3" preload="auto" hidden><source src="audio/deep3.mp3" type="audio/mpeg"></audio>
<audio id="Creepy Cat 1" preload="auto" hidden>     <source src="audio/creepy1.mp3" type="audio/mpeg"></audio>
<audio id="Creepy Cat 2" preload="auto" hidden>     <source src="audio/creepy2.mp3" type="audio/mpeg"></audio>
<audio id="snacks0" preload="auto" hidden>          <source src="audio/chips0.mp3" type="audio/mpeg"></audio>
<audio id="snacks1" preload="auto" hidden>          <source src="audio/chips1.mp3" type="audio/mpeg"></audio>
<audio id="snacks2" preload="auto" hidden>          <source src="audio/chips2.mp3" type="audio/mpeg"></audio>
<audio id="snacks3" preload="auto" hidden>          <source src="audio/chips3.mp3" type="audio/mpeg"></audio>
<audio id="snacks4" preload="auto" hidden>          <source src="audio/chips4.mp3" type="audio/mpeg"></audio>
<audio id="snacks5" preload="auto" hidden>          <source src="audio/chips5.mp3" type="audio/mpeg"></audio>
<audio id="paper0" preload="auto" hidden>           <source src="audio/paper0.mp3" type="audio/mpeg"></audio>
<audio id="paper1" preload="auto" hidden>           <source src="audio/paper1.mp3" type="audio/mpeg"></audio>
<audio id="paper2" preload="auto" hidden>           <source src="audio/paper2.mp3" type="audio/mpeg"></audio>
<audio id="paper3" preload="auto" hidden>           <source src="audio/paper3.mp3" type="audio/mpeg"></audio>
<audio id="paper4" preload="auto" hidden>           <source src="audio/paper4.mp3" type="audio/mpeg"></audio>
<audio id="paper5" preload="auto" hidden>           <source src="audio/paper5.mp3" type="audio/mpeg"></audio>
<audio id="whistle0" preload="auto" hidden>         <source src="audio/whistle0.mp3" type="audio/mpeg"></audio>
<audio id="whistle1" preload="auto" hidden>         <source src="audio/whistle1.mp3" type="audio/mpeg"></audio>
<audio id="whistle2" preload="auto" hidden>         <source src="audio/whistle2.mp3" type="audio/mpeg"></audio>
<audio id="whistle3" preload="auto" hidden>         <source src="audio/whistle3.mp3" type="audio/mpeg"></audio>
<audio id="whistle4" preload="auto" hidden>         <source src="audio/whistle4.mp3" type="audio/mpeg"></audio>
<audio id="whistle5" preload="auto" hidden>         <source src="audio/whistle5.mp3" type="audio/mpeg"></audio>
<audio id="whistle6" preload="auto" hidden>         <source src="audio/whistle6.mp3" type="audio/mpeg"></audio>
<audio id="ohyeah0" preload="auto" hidden>          <source src="audio/ohyeah0.mp3" type="audio/mpeg"></audio>
<audio id="ohyeah1" preload="auto" hidden>          <source src="audio/ohyeah1.mp3" type="audio/mpeg"></audio>
<audio id="ohyeah2" preload="auto" hidden>          <source src="audio/ohyeah2.mp3" type="audio/mpeg"></audio>

function playAudio(audioID) {
  if(muted) return;
  if(currentAudio)
    stopAudio();
    currentAudio = document.getElementById(audioID);
    currentAudio.play()
    /*.catch((error) => { console.log(audioID + ": " + currentAudio +
      " | " + currentAudio.childNodes[0].src + ", " + error) })*/;
  return currentAudio;
}

我尝试将音频元素标记为隐藏，但没有帮助。任何帮助表示赞赏，在此先感谢。

标签： javascripthtmlaudioweb-applicationsprogressive-web-apps

Answer 1

Chrome mobile v92 只允许您预装 40 个音频。