HTML 之 MP3复读器_#4299e1-优快云博客

在网页上使用的MP3复读工具，用于语言学习或者音乐练习之类的场景。
<!DOCTYPE html>
<html>
<head>
    <title>MP3复读器</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.2em;
        }
        
        .file-input {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
        }
        
        input[type="file"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: white;
        }
        
        .time-select {
            display: flex;
            gap: 20px;
            margin: 25px 0;
            flex-wrap: wrap;
        }
        
        .time-select label {
            font-weight: 500;
            color: #4a5568;
        }
        
        select {
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            background: white;
            transition: border-color 0.3s;
        }
        
        select:focus {
            border-color: #4299e1;
            outline: none;
        }
        
        #audioPlayer {
            width: 100%;
            margin: 25px 0;
            border-radius: 8px;
        }
        
        #replayButton {
            display: block;
            width: 100%;
            padding: 12px;
            background: #4299e1;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
            margin-top: 20px;
        }
        
        #replayButton:hover {
            background: #3182ce;
        }
        
        #fileNameDisplay {
            display: block;
            color: #48bb78;
            margin: 10px 0;
            font-style: italic;
        }
        
        /* 文件输入按钮美化 */
        input[type="file"]::file-selector-button {
            background: #4299e1;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        input[type="file"]::file-selector-button:hover {
            background: #3182ce;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }
            
            .time-select {
                flex-direction: column;
            }
            
            .file-input {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>

<div class="container">

    <h1>MP3复读器</h1>

    <!-- 文件选择输入 -->
    <div class="file-input">
        <label for="fileInput">请选择一个MP3文件:</label>
        <input type="file" id="fileInput" accept=".mp3" />
    </div>

    <!-- 文件名显示 -->
    <span id="fileNameDisplay"></span>

    <!-- 时间设置 -->
    <div class="time-select">
        <label for="startTime">开始时间 (分钟:秒): </label>
        <select id="startTimeSelect"></select>
        <label for="endTime">结束时间 (分钟:秒): </label>
        <select id="endTimeSelect"></select>
    </div>

    <!-- 音频播放器 -->
    <audio id="audioPlayer" controls style="width: 100%;">
        <source id="audioSource" src="" type="audio/mpeg">
        您的浏览器不支持 audio 标签。
    </audio>
    
    <!-- 重播按钮 -->
    <button id="replayButton">复读</button>

</div>

<script>
    var audio = document.getElementById('audioPlayer');
    var audioSource = document.getElementById('audioSource');
    var replayTime = 0;
    var fileNameDisplayElement = document.getElementById('fileNameDisplay');

    // 初始化时间选择器
    function initTimeSelect(selectId) {
        var selectElement = document.getElementById(selectId);
        for (let minutes = 0; minutes < 60; minutes++) {
            for (let seconds = 0; seconds <= 59; seconds++) {
                let option = document.createElement('option');
                option.value = minutes + ':' + ('0' + seconds).slice(-2);
                //仅默认选中 0:00
                if (minutes === 0 && seconds === 0) {
                    option.selected = true;
                }
                 /*
                if ((minutes == 0 && seconds == 0) || (minutes == 0 && seconds < 10)) {
                    option.selected = true;
                }
                */
                option.textContent = minutes + ':' + ('0' + seconds).slice(-2);
                selectElement.appendChild(option);
            }
        }
    }

    // 监听文件选择输入的变化
    document.getElementById('fileInput').addEventListener('change', function() {
        var file = this.files[0];

        if (file) {
            // 创建一个读取文件的Blob对象
            var reader = new FileReader();

            // 读取文件内容
            reader.onload = function(e) {
                audioSource.src = e.target.result;
                audio.load(); // 加载音频

                // 更新文件名显示元素的内容
                fileNameDisplayElement.textContent = file.name;
                
                // 开始播放音频
                //audio.play();
            }
            
            // 开始读取文件
            reader.readAsDataURL(file);
            
        }
    });

    initTimeSelect('startTimeSelect');
    initTimeSelect('endTimeSelect');

    document.getElementById('startTimeSelect').addEventListener('change', function() {
        var startTime = parseFloat(this.value.split(':')[0]) * 60 + parseFloat(this.value.split(':')[1]);
        audio.currentTime = startTime;
        replayTime = startTime;
    });

    document.getElementById('endTimeSelect').addEventListener('input', function() {
        var endTime = parseFloat(this.value.split(':')[0]) * 60 + parseFloat(this.value.split(':')[1]);
        if (isNaN(endTime) || endTime <= 0) {
            return;
        }
        audio.addEventListener('timeupdate', function() {
            if (this.currentTime >= endTime) {
                this.pause(); // 播放结束时暂停
            }
        });
    });

    document.getElementById('endTimeSelect').addEventListener('change', function() {
        var endTime = parseFloat(this.value.split(':')[0]) * 60 + parseFloat(this.value.split(':')[1]);
        if (isNaN(endTime) || endTime <= 0) {
            return;
        }
        audio.addEventListener('timeupdate', function() {
            if (this.currentTime >= endTime) {
                this.pause(); // 播放结束时暂停
            }
        });
    });

    document.getElementById('replayButton').addEventListener('click', function() {
        audio.currentTime = replayTime;
        audio.play();
    });
    
    // 监听音频播放结束事件
    audio.addEventListener('ended', function() {
        // 将当前时间重置为0秒，即从头开始播放
        this.currentTime = 0;
        this.play();
    });

    // 监听暂停事件，以防止在指定段落内意外停止
    audio.addEventListener('pause', function() {
        if (audio.currentTime >= parseFloat(document.getElementById('startTimeSelect').value.split(':')[0] * 60 + document.getElementById('startTimeSelect').value.split(':')[1]) && 
            audio.currentTime <= parseFloat(document.getElementById('endTimeSelect').value.split(':')[0] * 60 + document.getElementById('endTimeSelect').value.split(':')[1])) {
            this.play(); // 如果是在指定段落内，则继续播放
        }
    });

</script>
</body>
</html>