mp4info/Video2MP3.html at master · cmcxn/mp4info · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video to MP3 Converter</title>
    <!-- 引入ffmpeg.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js"></script>
    <style>
        /* 进度条样式 */
        #progressContainer {
            width: 100%;
            background-color: #ddd;
        }

        #progressBar {
            width: 1%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <input type="file" id="fileUploader" accept="video/*" />
    <button id="convertBtn">Convert to MP3</button>
    <div id="progressContainer" style="display:none;">
        <div id="progressBar">0%</div>
    </div>
    <button id="downloadBtn" style="display:none;">Download MP3</button>
    <audio id="audioPlayer" controls style="display:none;"></audio> <!-- 添加音频播放器 -->

<script>
    const { createFFmpeg, fetchFile } = FFmpeg;
    const ffmpeg = createFFmpeg({
        log: true,
        progress: ({ ratio }) => {
            // 更新进度条
            const progress = Math.floor(ratio * 100);
            const progressBar = document.getElementById('progressBar');
            progressBar.style.width = progress + '%';
            progressBar.textContent = progress + '%';
        }
    });

    document.getElementById('convertBtn').addEventListener('click', async () => {
        const fileUploader = document.getElementById('fileUploader');
        const files = fileUploader.files;
        if (files.length === 0) {
            alert("Please select a file.");
            return;
        }
        const file = files[0];

        // 显示进度条容器
        document.getElementById('progressContainer').style.display = 'block';

        const tempFileName = `temp_${Date.now()}`;
        const outputFileName = `${tempFileName}.mp3`;

        if (!ffmpeg.isLoaded()) await ffmpeg.load();

        ffmpeg.FS('writeFile', tempFileName, await fetchFile(file));

        await ffmpeg.run('-i', tempFileName, '-vn', '-ar', '44100', '-ac', '2', '-b:a', '192k', outputFileName);

        const data = ffmpeg.FS('readFile', outputFileName);
        const url = URL.createObjectURL(new Blob([data.buffer], { type: 'audio/mp3' }));

        // 设置下载按钮
        const downloadBtn = document.getElementById('downloadBtn');
        downloadBtn.onclick = function() { // 使用onclick事件监听
            const a = document.createElement('a');
            a.href = url;
            a.download = `${file.name.split('.')[0]}.mp3`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        };
        downloadBtn.style.display = 'block'; // 显示下载按钮

        // 设置音频播放器
        const audioPlayer = document.getElementById('audioPlayer');
        audioPlayer.src = url;
        audioPlayer.style.display = 'block'; // 显示音频播放器

        // Cleanup
        document.getElementById('progressContainer').style.display = 'none'; // 转换完成后隐藏进度条
    });
</script>
</body>
</html>