邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

56 line
1.5 KiB

  1. <!-- <template>
  2. <div>
  3. <input type="file" ref="videoInput" @change="handleVideoUpload" accept="video/*" />
  4. <div v-if="videoUrl">
  5. <video :src="videoUrl" controls style="width: 200px; height: 200px"></video>
  6. </div>
  7. <button @click="extractAudio" :disabled="!videoUrl">提取音频</button>
  8. <button @click="downloadAudio" :disabled="!audioUrl">下载音频</button>
  9. </div>
  10. </template>
  11. <script>
  12. import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
  13. export default {
  14. data() {
  15. return {
  16. ffmpeg: null,
  17. videoUrl: '',
  18. audioUrl: ''
  19. };
  20. },
  21. mounted() {
  22. this.ffmpeg = createFFmpeg({
  23. log: true
  24. });
  25. this.ffmpeg.load();
  26. },
  27. methods: {
  28. handleVideoUpload(event) {
  29. const file = event.target.files[0];
  30. this.videoUrl = URL.createObjectURL(file);
  31. },
  32. async extractAudio() {
  33. const file = this.$refs.videoInput.files[0];
  34. const inputPath = '/input' + file.name;
  35. const outputPath = '/output.mp3';
  36. await this.ffmpeg.write(inputPath, await fetchFile(file));
  37. await this.ffmpeg.run('-i', inputPath, '-vn', '-acodec', 'libmp3lame', outputPath);
  38. const data = await this.ffmpeg.read(outputPath);
  39. const audioBlob = new Blob([data.buffer], { type: 'audio/mp3' });
  40. this.audioUrl = URL.createObjectURL(audioBlob);
  41. },
  42. downloadAudio() {
  43. const link = document.createElement('a');
  44. link.href = this.audioUrl;
  45. link.download = 'audio.mp3';
  46. link.click();
  47. }
  48. }
  49. };
  50. </script> -->