<!-- <template>
  <div>
    <input type="file" ref="videoInput" @change="handleVideoUpload" accept="video/*" />
    <div v-if="videoUrl">
      <video :src="videoUrl" controls style="width: 200px; height: 200px"></video>
    </div>
    <button @click="extractAudio" :disabled="!videoUrl">提取音频</button>
    <button @click="downloadAudio" :disabled="!audioUrl">下载音频</button>
  </div>
</template>

<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

export default {
  data() {
    return {
      ffmpeg: null,
      videoUrl: '',
      audioUrl: ''
    };
  },
  mounted() {
    this.ffmpeg = createFFmpeg({
      log: true
    });

    this.ffmpeg.load();
  },
  methods: {
    handleVideoUpload(event) {
      const file = event.target.files[0];
      this.videoUrl = URL.createObjectURL(file);
    },
    async extractAudio() {
      const file = this.$refs.videoInput.files[0];
      const inputPath = '/input' + file.name;
      const outputPath = '/output.mp3';

      await this.ffmpeg.write(inputPath, await fetchFile(file));
      await this.ffmpeg.run('-i', inputPath, '-vn', '-acodec', 'libmp3lame', outputPath);

      const data = await this.ffmpeg.read(outputPath);
      const audioBlob = new Blob([data.buffer], { type: 'audio/mp3' });
      this.audioUrl = URL.createObjectURL(audioBlob);
    },
    downloadAudio() {
      const link = document.createElement('a');
      link.href = this.audioUrl;
      link.download = 'audio.mp3';
      link.click();
    }
  }
};
</script> -->
