html5制作音乐播放界面

作者：System 时间：2024年08月19日分类：所有,html5 字数：1123

以下是一个简单的HTML5音乐播放器界面示例：




<!DOCTYPE html>
<html>
<head>
    <title>简单音乐播放器</title>
    <style>
        #music-player {
            width: 300px;
            margin: auto;
            text-align: center;
        }
        button {
            padding: 5px 10px;
            margin: 5px;
            background: #6fa3ef;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        button:hover {
            background: #5382e2;
        }
    </style>
</head>
<body>
    <div id="music-player">
        <audio id="my-audio" src="your-music-file.mp3" controls></audio>
        <button onclick="playPause()">播放/暂停</button>
    </div>
    <script>
        function playPause() {
            var audio = document.getElementById('my-audio');
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
        }
    </script>
</body>
</html>

这段代码创建了一个简单的HTML5音乐播放器，包含播放和暂停按钮。用户点击按钮可以控制音乐的播放与暂停。<audio>标签的controls属性会显示默认的播放器控制条，你也可以通过JavaScript和CSS自定义控制界面。

html5制作音乐播放界面

评论已关闭

推荐阅读