Comments (5)
@zhw2590582 I am doing the same and trying to load pcm file using wf.load() like above you have mentioned-
`fetch('http://localhost:3000/images/standard-captions.pcm')
.then((res) => res.arrayBuffer())
.then((buffer) => {
this.wf.load({
sampleRate: 44100,
getChannelData() {
return new Float32Array(buffer);
},
});
});`
But it showing me error that -
"The load target is not a string. If you are loading a mediaElement, make sure the mediaElement.src is not empty."
I think this is due to this:
`load(target) {
if (target instanceof HTMLVideoElement || target instanceof HTMLAudioElement) {
this.options.mediaElement = target;
target = target.src;
}
errorHandle(
**typeof target === 'string' && target.trim(),**
`The load target is not a string. If you are loading a mediaElement, make sure the mediaElement.src is not empty.`,
);
this.loader.load(target);
this.emit('load');
return this;
}`
Please suggest where i am doing wrong?
Thanks
from wfplayer.
Yes, actually wf.load
method can be loaded AudioBuffer,Or you can parse the PCM data for audio on the server, such as using web-audio-api,Then the front-end loads PCM data through Ajax and simulates it as AudioBuffer, In one of my personal projects, that's how it works:
Node.js:
const fs = require('fs');
const { AudioContext } = require('web-audio-api');
const context = new AudioContext();
context.decodeAudioData(fs.readFileSync('/path/to/audio.mp3'), (audiobuffer) => {
// choose your channel
const channelData = audiobuffer.getChannelData(0);
fs.writeFileSync('/path/to/audio.pcm', channelData);
});
browser:
fetch('/path/to/audio.pcm')
.then((res) => res.arrayBuffer())
.then((buffer) => {
wf.load({
sampleRate: 44100,
getChannelData() {
return new Float32Array(buffer);
},
});
});
from wfplayer.
I forgot to release the latest version, you now try to install the latest version: [email protected]
from wfplayer.
Hi @zhw2590582 ,
Thanks for your reply. I have updated [email protected] version at my end and now the error not showing but the wave not been generating. Only a thin line is drawing in the timeline area. If i am increasing sampleRate value then length of line has been increasing but still wave not generating. See below-
This is buffer array that i am passing in load() function-
I am creating .pcm from .mp4 file using ffmpeg. Please suggest what i am making wrong?
Thanks,
from wfplayer.
In fact, WFPlayer does not yet support PCM files generated by ffmpeg
, I found that the PCM data generated by ffmpeg
and the PCM data generated by AudioContext
are very different. I have not found a compatible method, so I suggest you use web-audio-api to generate PCM data. Another point is that the sampleRate
option must be the same as the audio sampleRate
, otherwise the rendering will be abnormal.
const fs = require('fs');
const { AudioContext } = require('web-audio-api');
const context = new AudioContext();
context.decodeAudioData(fs.readFileSync('/path/to/audio.mp3'), (audiobuffer) => {
console.log(audiobuffer.sampleRate)
// choose your channel
const channelData = audiobuffer.getChannelData(0);
fs.writeFileSync('/path/to/audio.pcm', channelData);
});
from wfplayer.
Related Issues (20)
- Browser crash on loading video/audio of duration around 2 hours HOT 6
- with window.OffscreenCanvas to undefined, options will never be dispatched to drawer.config HOT 6
- Add option for cursor position HOT 2
- +1h audio file destroys the ram HOT 4
- am getting undefinde error first time when i refresh the page HOT 2
- getting audio infinity HOT 1
- Could you please add a speed-changing function? HOT 2
- can you guide me how to create multiple instance of wfplayer at run time? HOT 5
- Add `waveBorder`, `waveBorderColor`, and `waveBorderWidth` Options
- adding grab_start and grab_end events HOT 2
- decodeAudioData crash HOT 1
- loader模块load函数执行错误
- Appending custom headers HOT 1
- Region support HOT 3
- Control audio without audio tag HOT 2
- Webworker vs FFmpeg HOT 1
- npm run dev 报错无法运行 HOT 2
- 这是拼写错误,还是故意写成这个的? HOT 2
- Fill the entire audio width
- 可以发一个2.2.9么😁
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wfplayer.