master

分支 (1)

管理

管理

master

web
/
playsong.html

<!DOCTYPE html>
<html>

<head>
    <title>音乐播放器</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
        }

        .song-list {
            list-style-type: none;
            padding: 0;
        }

        .song-list-item {
            margin-bottom: 10px;
        }

        audio {
            width: 100%;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>音乐播放器</h1>
        <ul class="song-list">
            <li class="song-list-item">
                <button onclick="playSong('22102040123_秦潇_中国古代数学成就/BGM.mp3')">歌曲1</button>
            </li>
            <li class="song-list-item">
                <button onclick="playSong('22102040123_秦潇_中国古代数学成就/BGM.mp3')">歌曲2</button>
            </li>
            <li class="song-list-item">
                <button onclick="playSong('22102040123_秦潇_中国古代数学成就/BGM.mp3')">歌曲3</button>
            </li>
        </ul>
        <audio id="audio" controls>
            <source src="" type="audio/mpeg">
        </audio>
    </div>

    <script>
        function playSong(songUrl) {
            var audioElement = document.getElementById('audio');
            audioElement.src = songUrl;
            audioElement.play();
        }
    </script>
</body>

</html>