Is it possible to add audio from one file to video of another? #748

studio4evr · 2024-05-10T16:47:53Z

studio4evr
May 10, 2024

I've been pulling my hair out trying to create a page that adds audio from one file to video of another, but I'm getting errors I think are related to the files not being written to ffmpeg, namely:

writing  vid.mp4 REMIX.mp3
classes.js:53  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'charAt')
#e.#e.onmessage @ classes.js:53
transcode:66 wrote files
classes.js:53  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'charAt')
#e.#e.onmessage @ classes.js:53
transcode:78 Transcoding Process: 6.2548828125 ms
transcode:85  Error during transcoding: ErrnoError: FS error

can anyone see what my problem is? does ffmpeg wasm support this kind of thing? here's the code so far:

<!DOCTYPE html>
<html>
<head>
    <script src="{{ url_for('static', filename='ffmpeg/ffmpeg/dist/umd/ffmpeg.js') }}"></script>
    <script src="{{ url_for('static', filename='ffmpeg/util/dist/umd/index.js') }}"></script>
</head>
<body>
    <h3>Upload a video and audio to transcode to mp4 (x264) and play!</h3>
    <video id="output-video" controls></video><br/>
    <input type="file" id="uploader-video" accept=".mp4">
    <input type="file" id="uploader-audio" accept=".mp3">
    <button id="transcode-button" disabled>Transcode</button>
    <p id="message">Please upload both video and audio files.</p>
    <script>
      const { fetchFile } = FFmpegUtil;
      const { FFmpeg } = FFmpegWASM;
      let ffmpeg = new FFmpeg({ log: true });

      document.addEventListener('DOMContentLoaded', async () => {
        const message = document.getElementById('message');
        try {
          await ffmpeg.load({
            coreURL: "{{ url_for('static', filename='ffmpeg/core/dist/umd/ffmpeg-core.js') }}",
          });
          message.textContent = "FFmpeg is ready. Please upload the files.";
        } catch (error) {
          console.error('Failed to load FFmpeg:', error);
          message.textContent = "Failed to load FFmpeg core.";
        }
      });

      const videoInput = document.getElementById('uploader-video');
      const audioInput = document.getElementById('uploader-audio');
      const transcodeButton = document.getElementById('transcode-button');

      function updateTranscodeButtonState() {
        if (videoInput.files[0] && audioInput.files[0]) {
          transcodeButton.disabled = false;
        }
      }

      videoInput.addEventListener('change', updateTranscodeButtonState);
      audioInput.addEventListener('change', updateTranscodeButtonState);

      transcodeButton.addEventListener('click', async () => {
        const message = document.getElementById('message');
        const videoFile = videoInput.files[0];
        const audioFile = audioInput.files[0];

        if (!videoFile || !audioFile) {
          message.textContent = 'Both video and audio files are required!';
          return;
        }

        try {
          
          message.textContent = 'Start transcoding';
          console.log("writing ", videoFile.name, audioFile.name);

          const { videoName } = videoFile;
          ffmpeg.writeFile(videoName, await fetchFile(videoFile));

          const { audioName } = audioFile;
          ffmpeg.writeFile(audioName, await fetchFile(audioFile));

          console.log("wrote files");  

          console.time('Transcoding Process');
          await ffmpeg.exec(
            '-i', videoFile.name,
            '-i', audioFile.name,
            '-map', '0:v',
            '-map', '1:a',
            '-c:v', 'copy',
            '-c:a', 'aac',
            '-strict', 'experimental'
          );
          console.timeEnd('Transcoding Process');

          const data = await ffmpeg.readFile('output.mp4');
          const video = document.getElementById('output-video');
          video.src = URL.createObjectURL(new Blob([data], { type: 'video/mp4' }));
          message.textContent = 'Transcoding complete. Video is ready for playback.';
        } catch (error) {
          console.error('Error during transcoding:', error);
          message.textContent = 'An error occurred during transcoding.';
        }
      });
    </script>
  </body>
</html>

studio4evr · 2024-05-15T15:13:26Z

studio4evr
May 15, 2024
Author

this worked..

const transcode = async () => {
const message = document.getElementById('message');
const videoInput = document.getElementById('uploader-video');
const audioInput = document.getElementById('uploader-audio');

    const videoFile = videoInput.files[0];
    const audioFile = audioInput.files[0];

    if (!videoFile || !audioFile) {
      message.innerHTML = 'Both video and audio files are required!';
      return;
    }

    if (ffmpeg === null) {
      ffmpeg = new FFmpeg();
      ffmpeg.on("log", ({ message }) => {
        console.log(message);
      });
      ffmpeg.on("progress", ({ progress, time }) => {
        message.innerHTML = `${(progress * 100).toFixed(2)} %, time: ${(time / 1000000).toFixed(2)} s`;
      });
      await ffmpeg.load({
        coreURL: "{{ url_for('static', filename='ffmpeg/core/dist/umd/ffmpeg-core.js') }}",
      });
    }

    const videoName = videoFile.name;
    const audioName = audioFile.name;

    await ffmpeg.writeFile(videoName, await fetchFile(videoFile));
    await ffmpeg.writeFile(audioName, await fetchFile(audioFile));

    message.innerHTML = 'Start transcoding';
    console.time('exec');
    await ffmpeg.exec([
      '-i', videoName,
      '-i', audioName,
      '-map', '0:v',
      '-map', '1:a',
      '-c:v', 'copy',
      '-c:a', 'aac',
      '-strict', 'experimental',
      'output.mp4'
    ]);
    console.timeEnd('exec');
    message.innerHTML = 'Complete transcoding';

    const data = await ffmpeg.readFile('output.mp4');
    const video = document.getElementById('output-video');
    video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
  }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Is it possible to add audio from one file to video of another? #748

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Is it possible to add audio from one file to video of another? #748

Uh oh!

studio4evr May 10, 2024

Replies: 1 comment

Uh oh!

studio4evr May 15, 2024 Author

studio4evr
May 10, 2024

studio4evr
May 15, 2024
Author