html网页音乐播放器代码

以下是一个简单的HTML音乐播放器代码示例:

<!DOCTYPE html>
<html>
<head>
    <title>音乐播放器</title>
</head>
<body>
    <audio controls>
        <source src="music.mp3" type="audio/mpeg">
        <source src="music.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

在这个示例中,我们使用<audio>标签来创建音乐播放器。controls属性用于显示播放器控件,包括播放/暂停按钮、音量控制和进度条。<source>标签用于指定音乐文件的URL和类型。如果浏览器不支持<audio>标签,将显示“Your browser does not support the audio element.”的文本。

如果你想要更加自定义的音乐播放器,可以使用HTML、CSS和JavaScript来创建。以下是一个示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>自定义音乐播放器</title>
    <style>
        /* 播放器样式 */
        .player {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            width: 300px;
        }

        /* 播放器控件样式 */
        .controls {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .controls button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px;
            margin: 0 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .controls button:hover {
            background-color: #3e8e41;
        }

        /* 进度条样式 */
        .progress {
            width: 100%;
            height: 10px;
            background-color: #ddd;
            border-radius: 5px;
            margin-top: 20px;
            position: relative;
        }

        .progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #4CAF50;
            border-radius: 5px;
            width: 0;
            transition: width 0.1s ease-in-out;
        }

        /* 时间显示样式 */
        .time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 14px;
        }

        .time span {
            color: #666;
        }
    </styl_