Audio can be generated, modified, analyzed with the audioContext supported by all modern browsers. In Google Chrome it's even possible to generate a webm video file from canvas animations.
But is there any possibility to combine audio and a webm video in the browser using javascript and no further server side dependencies? I thought about something like crunker but with audio+video instead of audio+audio.
I spend hours on searching but didn't find anything so far. Any tip / hint or idea is welcome.
There's this https://www.webrtc-experiment.com/ffmpeg/merging-wav-and-webm-into-mp4.html
A web assembly version of ffmpeg that is used to join the WebM and Wav into an MP4.
https://github.com/muaz-khan/RecordRTC
https://github.com/muaz-khan/Ffmpeg.js
Related
I am using simple HTML5 <video> tag. Now chrome is playing .mkv videos but in mozilla firefox it is not supported. So, is there something which will solve my all problems related to playing video on web page?
No. If a browser doesn't support a container format or codec, then it doesn't support it and you need something installed to add support for it.
Consider offering your videos in multiple formats, or at least one with wider support.
As far as I know, the easiest solution is to transcode the video and put it in an MP4 container. Matroska has never been a container with a broad audience. If the audio and video streams are already compatible the transcoding should be pretty fast too. e.g. ffmpeg is able to do this:
$ ffmpeg -i input.mkv -codec copy output.mp4
Given a plain web video, e.g.:
<video src="my-video.mp4"></video>
How could I generate its audio waveform?
Is it possible to generate the waveform without playing the video?
Notes:
I'm interested in the available APIs to achieve this, not a "how to render a waveform to a canvas" guide.
Plain JavaScript, please. No libraries.
You might try AudioContext.decodeAudioData, though I can't tell whether video medias are well supported or not, it will probably depends a lot on the codecs and the browsers.
I am a bit surprised to see that FF, chrome and Safari accept it with an mp4 with and mpeg4a audio inside.
If it works, then you can use an OfflineAudioContext to analyze your audio data as fast as possible and generate your waveform data.
See also MDN article on Visualizations with Web Audio API
If you will use web audio API, you will render on the client side.
You will not control the quality of experience because rendering may cause memory and time issues for clients.
you can generate an image of the waveform using FFmpeg on the backend and pass it to the front.
It is pretty simple.
https://trac.ffmpeg.org/wiki/Waveform
example:
ffmpeg -i C:\test.mp3 -filter_complex "showwavespic=s=640x120" -frames:v 1 C:\waveform.png
Problem is chrome doesn't support WAV files and Electron is built on Chrome.
Our recording server software (Asterisk) records calls to WAV and have no choice but to use WAV as a format since there are more than 100000 recordings.
Only option it seems for now would be to convert the files to mp3 on the fly when that file is requested but having some difficulty getting there.
Any suggestions on how to go about doing this will be greatly appreciated.
Check out the node packages wav and speaker, they should offer the functionality you desire.
I have a problem that most the internet has with html 5 videos. There is no way to play all video types in any one browser. You need to include many different formats to make sure that my browser can play any video type. This is a big problem that one of my clients has, and he has pushed to me.
I can only read from the server to get the videos, and there is only one version of any video on the server. The person running the server has refused to convert any videos before saving to the server, and people upload their videos to this server from any type of device, and as such there are about 7 different formats. No browser supports all 7. I need some way, and I mean any way to be able to stream these videos in real time from the web.
I have found ways to convert them in javascript, but it takes like 2 minutes to convert a 30 second video. I have tried adding plugins, but I have not found any plugin that can do it. My current thought, and I am testing this: use Explorer and windows media player to play videos, or use quicktime with safari to play the videos.
Maybe there is some magical plugin that can play all video MIME types, like VLC, but VLC is no longer supported for some reason in chrome, and I cannot find it in fire fox. or maybe I can add the codec to Chrome or firefox? Maybe draw the video on a canvas, and stream audio magically? or sacrifice my first born son? heck i'll even throw in the second kid.
If someone can help me I would be so happy, and I think a lot of the internet would be too.
HTML5 presents the Audio tag for embedding sounds in web pages. However, support for different formats varies. IE, Chrome and Safari will accept MP3 files, while Opera and older versions of Firefox require WAV or OGG files. I do not have access to multiple formats for each of my sound files, and at this point I am tempted to try to run file conversions on each request requiring a different format. Is there a way of playing sounds irrespective of format, preferably without using Flash?
How important is it that you support older browsers? I just tested the latest version of Opera and it plays MP3s fine. QuickTime can play MP3s as well, if they happen to have that installed. You could use that as a fallback instead of Flash. Other than that... there are apps out there to mass convert files from MP3s to other formats.