H5 处理ios端部分mp3文件播放不了
有些mp3文件在pc端,安卓端可以正常播放,但是在ios设备上却不能播放,大概是给音频源文件转换格式时没有使用转换工具,而是直接修改的后缀,比如将【demo.wav】直接修改成【demo.mp3】,这样直接修改后缀而产生的文件在ios端会导致解码失败无法播放;- 但这样处理有个缺点就是如果文件太大,生成的base64链接地址会特别大,有可能导致手机卡顿,具体我没测试,我猜是这样的( ̄▽ ̄)~*-经
·
问题描述:有些mp3文件在pc端,安卓端可以正常播放,但是在ios设备上却不能播放,大概是给音频源文件转换格式时没有使用转换工具,而是直接修改的后缀,比如将【demo.wav】直接修改成【demo.mp3】,这样直接修改后缀而产生的文件在ios端会导致解码失败无法播放;
解决方法:
1、在上传时杜绝此类直接修改后缀的音频文件;
2、在前端将音频流转换成【data:audio/wav;base64,】格式的base64链接进行播放:
function downloadMP3ToBase64(url){
return new Promise((resolve,reject) => {
fetch(url).then(res => res.blob()).then(blob => {
blobToBase64(blob).then(res => {
let base64 = 'data:audio/wav;base64,' + res.split(',')[1];
resolve(base64);
})
})
})
}
function blobToBase64(blob) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
resolve(e.target.result);
};
fileReader.readAsDataURL(blob);
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'));
};
});
}
downloadMP3ToBase64('demo.mp3').then(base64 => {
const v = document.createElement('audio');
v.controls = true;
v.src = base64;
document.body.appendChild(v);
})
- 经测试在ios端能正常播放的mp3文件转成wav格式base64也是能播放的;
- 但这样处理有个缺点就是如果文件太大,生成的base64链接地址会特别大,有可能导致手机卡顿,具体我没测试,我猜是这样的( ̄▽ ̄)~*
更多推荐
已为社区贡献5条内容
所有评论(0)