Comments (4)
Thank you so much for the work and this great library.
Since our upcoming project won't have much need to audio mixing, I don't think I'll tap into this issue at the moment. But I hope to find other areas to contribute on.
from videocontext.
Hi @jesperstarkar great question. This is something that's come up previously and we don't have a really nice solution to it yet.
You can currently use the WebAudio API with the VideoContext but the integration between the two is a bit awkward. The following is an example of creating a MediaElementAudioSourceNode from a video node:
var canvas = document.getElementById("canvas");
var ctx = new VideoContext(canvas);
var audioContext = new AudioContext();
var videoNode = ctx.video("./video.mp4", 1600);
videoNode.start(0);
videoNode.stop(5);
videoNode.connect(ctx.destination);
videoNode.registerCallback("loaded", ()=>{
//Wait till the node has loaded so a video element exists.
var a1 = audioContext.createMediaElementSource(videoNode.element);
a1.connect(audioContext.destination);
})
ctx.play();
Doing things this way also means you have to create and manage your own cross-fades that follow the transitions of a transition node, which isn't very nice!
I'll have a look at adding in some experimental convenience functions in a future release that hide away some of the complexities. I'll keep this issue up to date with the progress.
from videocontext.
@MatthewShotton - Do you have any suggestions with where to start researching? I'll be needing to look into audio soon, so might as well see how to commit back to the project rather than doing in house hacks.
from videocontext.
This is back on our radar now. We'd either like to ease combining videocontext and audiocontext or provide some functionality within the library.
I'm closing this particular issue for now.
from videocontext.
Related Issues (20)
- Can I run on server and save final video ? HOT 4
- What's the easiest way to have a 'poster' image whilst a video initially buffers?
- InvalidAccessError when calling clearTimelineState or destroy in Microsoft Edge HOT 2
- Unhandled Rejection (TypeError): 2 is not a valid argument count for any overload of Window.createImageBitmap
- TypeError: Invalid operand to 'instanceof': Function expected
- imageNode seek registerCallback loaded. is instability
- Expose internal nodes for extending HOT 2
- Live HLS Support
- Empty graph does not clear canvas
- CodeSandbox example error HOT 1
- 多个音频播放有噪音
- Append videos while playing HOT 2
- Video not rendered initially if not cached
- Is there a way to apply the LUT?
- Video stops for a moment.
- Do start, stop functions take only seconds?
- Is it possible to apply LUTs (3D, 1D) via effect node.
- Suggestion: Use WebCodecs API
- How to position element on the canvas? HOT 2
- Typescript conversion? HOT 1
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 videocontext.