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

你可能感兴趣的:(JavaScript,前端,h5)