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
Related
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
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
I'm trying to capture, modify and finally output audio in node with Electron (Mac OSX). These are the steps:
Capture the audio before it's output, possibly via CoreAudio.
Modify the audio stream/buffer via the Web Audio API.
Output the modified buffer to the sound device.
I've tried node-core-audio. However, the most I can achieve is a rapid glitching sound. Other than this a I haven't been able to find a good solution I/O of audio.
How can I achieve this without sacrificing sound quality?
I'm not sure what you want to accomplish, but on MacOS, this is not yet possible. I came accross the problem of recording system sound on MacOS, and I found a solution. Finally! Using Soundflower and Javascript with electron, I finally could record system audio. Though it is not exactly what you want, I modified this audio stream by adding it with video stream from the System, then displayed it to the user. Here is my solution to the issue IN this detailed blog post I think it is better than posting all the long steps here on stackoverflow.
I'm working on a website for a podcast that does live video and audio streaming. We're currently stuck using JWPlayer AND jPlayer to do it.
The reason is that past attempts to get jPlayer to play live RTMP streams have never seemed to work. Live audio on the other hand works fine though.
I've seen plenty of demos for RTMP video streaming, but they're streaming a static, prerecorded file, not a live feed.
Here's a sample stream I'm trying to use: rtmp://pclix-channel.videocdn.scaleengine.net/pclix-channel/live/mp4:priestly (we're using ScaleEngine, so if it works with this it'll work with ours).
It won't seem to play at all. No errors in console that I can find, nothing.
I can't find any recent information saying one way or another if it's even currently able to support it. So I'm not sure if I'm missing something, or if it's currently futile and I should just find another free, open-source solution (we don't want JWPlayer). All we need is a player composed of a video window and a JavaScript API; we already have a custom CSS skin for it.
Since HTML5 isn't ready yet, and getUserMedia doesn't work in browsers i have tested, I am asking that is there any "wrappers" so I could grap audio stream from microphone and send it to server with Javascript. Similar wrapper has been made with web cameras: (google for a "jquery-webcam-plugin". Two link restriction), but I haven't found any similar things for microphone audio streaming.
Audio can be in any commonly known format.
Flash is not my daily basis, flash tips might not help.
Since Google gears has been deprecated, I think it is not wise to use AudioApi. This is not a good news either, so I am guessing that only choices are Java and Flash.
I will appreciate every hint and tip I get.
I'm not sure what you mean by "Flash is not my daily basis". Your other option is Java, but that's less user-friendly. If you're going to require a plug-in (and you'll have to until getUserMedia() is implemented), you might as well make it Flash.
Here is a project that wraps a simple Flash app with a Javascript API that streams audio via an HTTP post to a web-server of your choice:
https://code.google.com/p/wami-recorder/
It's not ideal, but it works and does not require a clunky Flash Media Server.