zhw2590582 / WFPlayer

:ocean: WFPlayer.js is an audio waveform generator
https://wfplayer.js.org
MIT License
262 stars 32 forks source link

报错:AudioContext decoding get Wrong:Failed to execute 'decodeAudioData' on 'BaseAudioContext'..... #28

Closed bartflyian closed 2 years ago

bartflyian commented 2 years ago

我使用在线的测试wav音频文件时可以正常播放、显示波形图;但使用后端提供的wav接口时却报错了,无法生成波形,但等待后可以播放,似乎是audioContext解析不了,但我不知道是哪里有问题; 是否对获取的wav文件有所要求(格式或者大小等...)

zhw2590582 commented 2 years ago

后端提供的wav接口,是指wav文件访问链接吗?你的wav文件大不大,不大的话可以加载完再生成波形图试试

var wf = new WFPlayer({
    container: document.querySelector("#waveform"),
});

fetch("path/to/audio.wav")
    .then((res) => res.buffer())
    .then((buffer) => new Uint8Array(buffer))
    .then((uint8Array) => wf.load(uint8Array));
bartflyian commented 2 years ago

后端提供一个wav文件流,目前是想边加载边生成波形

zhw2590582 commented 2 years ago

其实很难做到真正的边加载边生成波形的,因为这个库使用浏览器自带的AudioContext接口去解码音频,意味着每次解码必需是一个完整的可播放的音频(包含头部元信息),但假如你截取了一个音频的一部分(可能不包含头部元信息)去解码,AudioContext识别不出来这个是什么数据的。

bartflyian commented 2 years ago

嗯嗯,感谢你的回答

yuguaa commented 1 year ago

我想使用MP4加载波形,报错挺厉害的,不知道怎么处理 image

zhw2590582 commented 1 year ago

@yuguaa 你可以贴这个mp4的地址出来吗,我看看

yuguaa commented 1 year ago

@yuguaa 你可以贴这个mp4的地址出来吗,我看看

这个地址有公司的信息,不太方便,是mp4格式,没有其他的要求,视频大小大概是400M

zhw2590582 commented 1 year ago

@yuguaa 这视频有点大,音频解码过程都会把浏览器卡死,你可以把视频转成mp3试试,首页有ffmpeg的教程

yuguaa commented 1 year ago

@yuguaa 这视频有点大,音频解码过程都会把浏览器卡死,你可以把视频转成mp3试试,首页有ffmpeg的教程

3q,我去看看

huanghaiyang commented 6 months ago

@yuguaa 这视频有点大,音频解码过程都会把浏览器卡死,你可以把视频转成mp3试试,首页有ffmpeg的教程

ffmpeg转码mp3需要的时间会更长~且ffmpeg本身体积有>20mb,光加载ffmpeg就得一分钟~~~