前端 用HTML，CSS, JS 写一个简易的音乐播放器
以下是一个使用HTML、CSS和JavaScript创建的简易音乐播放器的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易音乐播放器</title>
<style>
.music-player {
width: 300px;
margin: 20px auto;
text-align: center;
}
.music-player button {
padding: 5px 10px;
margin: 5px;
background: #6fa3ef;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.music-player button:hover {
background: #4d81dc;
}
audio {
width: 100%;
}
</style>
</head>
<body>
<div class="music-player">
<audio id="music" src="your-music-file.mp3" controls></audio>
<button onclick="playMusic()">播放</button>
<button onclick="pauseMusic()">暂停</button>
</div>
<script>
function playMusic() {
document.getElementById('music').play();
}
function pauseMusic() {
document.getElementById('music').pause();
}
</script>
</body>
</html>在这个例子中，我们创建了一个包含播放和暂停按钮的音乐播放器。用户点击播放按钮时，音乐开始播放；点击暂停按钮时，音乐暂停。你需要将your-music-file.mp3替换为你的音乐文件路径。这个播放器使用了HTML5的<audio>元素以及JavaScript来控制播放和暂停。
评论已关闭