1

I need to add audio to an existing mp4 video. You could think of this as background music. There is audio already in the video. But I need to add another audio track, and it needs to be done client side. I'm trying to avoid additional libraries/tech like ffmpeg and wasm. Any thoughts on how to do this with just Javascript and html?

SnakeBearLB
  • 49
  • 1
  • 3
  • you may have some luck muting the video and playing the music from an ` – Offbeatmammal Jan 12 '22 at 05:39
  • @SnakeBearLB I think you're not getting any response about your post because it's not obvious what your "**this**" means when you say _"Any thoughts on how to do **this** with just Javascript and html?"_ I mean why not just read the data into some buffer Arrays and start editing their byte values? You can get PCM of the video using `decodeAudioData()` if you attach `audioNode` to the video. Once you have mixed the two audios you'll have to encode that result back to AAC (you can try the **webCodecs** API if you use Chrome, or find some JS encoder) then edit the MP4 bytes to hold new audio. – VC.One Jan 16 '22 at 22:39
  • **PS:** _"I need to add audio to an existing mp4 video"_ Make sure this need comes after you have **(1)** Practiced how to mix two audios (forget the video part, maybe do it with two MP3 files) **(2)** Researched the file structure of MP4 (to know where to get/put the audio bytes and which MP4 atoms in metadata to update) **(3)** You have found (or made) some JS-based audio encoder to convert the PCM back into AAC.... After this, you make your post here and to us (as it is written) it's not obvious where/how you're stuck as a starting point to the task of re-mixing the audio of MP4. – VC.One Jan 16 '22 at 22:56

1 Answers1

0

If you just want to add background music to your video, I would recommend editing the video in some video editing software such as imovie or adobe video editior or some online editors because you cannot combine video and audio in HTML or Javascript. Once you are done editing the video, you could save that video and use it in your HTML using the video tag:

<video width="500" height="500" controls>
  <source src="the name of your video file goes here" type="video/mp4 or ogg>
</video>
Monish Munagala
  • 17
  • 3
  • 4
    For the sake of future readers... _"You cannot combine video and audio in HTML or Javascript"_ **Not true**. Asker just wants to **edit a file** so it's just an Array he has to edit by writing new byte values (of mixed audio encoded back into AAC format) and then save as file. All this (file read/write, audio mixing, byte Arrays) can be done with Javascript. Even the AAC audio encoder can be (and has been) written in Javascript. Even if not saving a file, there are still ways to mix/replace audio in realtime as the video plays. – VC.One Jan 16 '22 at 23:17