H5 处理ios端部分mp3文件播放不了

问题描述:有些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链接地址会特别大,有可能导致手机卡顿,具体我没测试,我猜是这样的( ̄▽ ̄)~*

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值