HTML5实现我的音乐网站源码

由于原始代码中存在的问题，以下是一个修复后的核心函数示例，展示了如何在HTML5中创建一个简单的音乐播放器界面：




<!DOCTYPE html>
<html>
<head>
    <title>My Music Website</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <img id="logo" src="logo.png" alt="My Music Logo">
            <h1>My Music Website</h1>
        </div>
        <div id="content">
            <!-- 音乐播放列表 -->
            <table id="playlist">
                <tr>
                    <th>Song</th>
                    <th>Artist</th>
                    <th>Album</th>
                </tr>
                <tr>
                    <td>Song Title 1</td>
                    <td>Artist Name 1</td>
                    <td>Album Title 1</td>
                </tr>
                <!-- 其他歌曲信息... -->
            </table>
            <!-- 播放器控件 -->
            <div id="player">
                <button id="playButton">Play</button>
                <input type="range" id="seekBar" value="0">
                <div id="timeBar">
                    <span id="timeElapsed">0:00</span> / <span id="timeTotal">0:00</span>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):




/* 简单的样式，仅作演示用 */
#wrapper {
    width: 800px;
    margin: 0 auto;
}
#header {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
}
#logo {
    height: 50px;
    margin-right: 20px;
}
#content {
    padding: 20px;
}
#playlist th {
    text-align: left;
    padding-right: 20px;
}
#player {
    margin-top: 20px;
}
#player button {
    margin-right: 10px;
}
#seekBar {
    width: 100%;
}
#timeBar {
    margin-top: 5px;
}

JavaScript (script.js):




// 假设音乐播放逻辑已经实现，这里只是示例控件的基本功能
window.onload = function() {
    var playButton = document.getElementById('playButton');
    var seekBar = document.getElementById('seekBar');
    var timeElapsed = document.getElementById('timeElapsed');
    var timeTotal = document.getElementById('timeTotal');
 
    // 播放/暂停按钮功能
    playButton.onclick = function() {
        if (playButton.innerText === "Play") {
            playButton.innerText = "Pause";
            // 模拟播放音乐
            // playMusic();
        } else {
            playButton.innerText = "Pla

HTML5实现我的音乐网站源码

评论已关闭

推荐阅读