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>