前端audio音频使用base64编码播放 |
您所在的位置：网站首页 › midi音频怎么转化成mp3 › 前端audio音频使用base64编码播放 |
|
接口返回的数据是base64的编码,原先的思路是先把base64转化成MP3并下载到本地，但是发现这样做后还得解决文件路径问题，而且转化成mp3下载到本地再播放的这个用户体验很差。于是就想着audio能不能直接播放base64数据。 一、base64编码长度较短的时候，可以直接播放。上述是wav格式音频，如果你是mp3等其他格式，则audio的src属性里面的audio/wav 数据格式要做相应的修改,如mp3对应 audio/x-mpeg,其他格式的音频请参考这篇文章。 测试之后是成功的，但是替换成我自己的base64数据（1M多）后却播放不了了。 二、base64编码长度较大时（临界值还未知），需要将base64转化成blob对象html: js: /** * desc: base64对象转blob文件对象 * @param base64 ：数据的base64对象 * @param fileType ：文件类型 mp3等; * @returns {Blob}：Blob文件对象 */ function base64ToBlob(base64, fileType) { let typeHeader = 'data:application/' + fileType + ';base64,'; // 定义base64 头部文件类型 let audioSrc = typeHeader + base64; // 拼接最终的base64 let arr = audioSrc.split(','); let array = arr[0].match(/:(.*?);/); let mime = (array && array.length > 1 ? array[1] : type) || type; // 去掉url的头，并转化为byte let bytes = window.atob(arr[1]); // 处理异常,将ascii码小于0的转换为大于0 let ab = new ArrayBuffer(bytes.length); // 生成视图（直接针对内存）：8位无符号整数，长度1个字节 let ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: mime }); } let audioBlob = base64ToBlob("你的base64编码","mp3"); let audio = document.getElementById("audioId"); audio.src = window.URL.createObjectURL(audioBlob); audio.addEventListener("canplay", () => { window.URL.revokeObjectURL(audio.src); });这个方法用在视频video好像也是可以的，不过我还没试过，大家可以参考这篇文章。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |