为什么我的m4a音频可以使用html5播放,而不能在Android上使用fetch和blob uri播放?

I'm having a hard time with this. I can't get my audio to play in Chrome on Android 8. If I use the audio element, my m4a audio will play fine. What I want to do is fetch the audio, and use a blob uri instead.

The code works on desktop, and iOS Safari. But when I try it on Chrome Android, I get the DEMUXER_ERROR_DETECTED_AAC error.

Unfortunately, you can't just run the SO snippet on your mobile device, so I've provided the fiddle here too. If you navigate to the fiddle on Chrome Android, the HTML audio will play fine, but the fetch audio won't.

https://jsfiddle.net/mtycholaz/v1r7xhck/16/show

const audio = new Audio();
let blobUri = '';

audio.addEventListener('error', (ev) => {
  console.log('error', ev.srcElement.error.message);
  document.getElementById('duration').innerText = ev.srcElement.error.message;
});

audio.addEventListener('loadeddata', () => {
  document.getElementById('duration').innerText = 'Length: ' + audio.duration;
});

fetch('https://leaderfoldera5b0.blob.core.windows.net/client/Symphony%20No.6%20(1st%20movement).m4a?sv=2019-02-02&st=2020-05-24T01%3A21%3A54Z&se=2021-05-25T01%3A21%3A00Z&sr=b&sp=r&sig=NHESmCHWR23EltpmSRnmibh8cwSH%2Fn%2FU1NmI2VOzTvI%3D', {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin': '*'
  }

}).then((response) => {
  response.blob().then(result => {
    blobUri = URL.createObjectURL(result);
    document.getElementById('play').innerText = 'Play'
  });
});

document.getElementById('play').addEventListener('click', () => {
  if (audio.paused) {
    audio.src = blobUri;
    audio.play();
  } else {
    audio.pause();
  }
});
body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}
<button id="play">
  Downloading audio...
</button>
<br/>
<span id="duration"></span>
<br/>
<audio controls>
  <source src="https://leaderfoldera5b0.blob.core.windows.net/client/Symphony%20No.6%20(1st%20movement).m4a?sv=2019-02-02&st=2020-05-24T01%3A21%3A54Z&se=2021-05-25T01%3A21%3A00Z&sr=b&sp=r&sig=NHESmCHWR23EltpmSRnmibh8cwSH%2Fn%2FU1NmI2VOzTvI%3D" type="audio/x-m4a" />
</audio>
评论