03_Python-PHP/loopAudio.php at main · Yiwei666/03_Python-PHP · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
    <title>循环播放音频</title>
    <style>
        body {
            text-align: center;
        }

        #container {
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translate(-50%, -15%);
            text-align: center;
        }

        form {
            margin-bottom: 20px; /* 调整行间距的值，可以根据需要修改 */
        }

        #progressBar {
            width: 100%;
            height: 20px;
            margin-top: 10px;
            background-color: #ddd;
        }

        #progress {
            height: 100%;
            width: 0;
            background-color: #4caf50;
        }

        #timeDisplay {
            margin-top: 10px;
        }
    </style>

</head>
<body>
<div id="container">
    <form method="post" action="">
        <label for="audio_url">MP3音频链接:</label>
        <input type="text" id="audio_url" name="audio_url" required>
        <input type="submit" value="播放">
    </form>

    <button id="toggleBtn" onclick="togglePlayPause()">暂停/播放</button>

    <div id="progressBar">
        <div id="progress"></div>
    </div>

    <div id="timeDisplay">0:00 / 0:00</div>

    <script>
        var audioUrl = "<?php echo isset($_POST['audio_url']) ? $_POST['audio_url'] : ''; ?>";
        var audio = new Audio(audioUrl);

        function playAudio() {
            audio.loop = true;
            audio.play();

            setInterval(function() {
                if (audio.ended) {
                    setTimeout(function() {
                        audio.play();
                    }, 1500);
                } else {
                    updateProgressBar();
                    updateTimeDisplay();
                }
            }, 100);
        }

        function togglePlayPause() {
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
        }

        function updateProgressBar() {
            var progress = (audio.currentTime / audio.duration) * 100;
            document.getElementById("progress").style.width = progress + "%";
        }

        function updateTimeDisplay() {
            var currentTime = formatTime(audio.currentTime);
            var duration = formatTime(audio.duration);
            document.getElementById("timeDisplay").innerText = currentTime + " / " + duration;
        }

        function formatTime(time) {
            var minutes = Math.floor(time / 60);
            var seconds = Math.floor(time % 60);
            seconds = seconds < 10 ? "0" + seconds : seconds;
            return minutes + ":" + seconds;
        }

        audio.addEventListener('timeupdate', updateProgressBar);

        if (audioUrl !== "") {
            playAudio();
        }
    </script>
</div>
</body>
</html>