html5制作音乐播放界面
以下是一个简单的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自定义控制界面。
评论已关闭