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

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

{{title}}

Replies: 1 comment

{{title}}

Select a reply

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

studio4evr May 10, 2024

Replies: 1 comment

studio4evr May 15, 2024 Author

studio4evr
May 10, 2024

studio4evr
May 15, 2024
Author