HTML5+CSS3+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>
#player { text-align: center; }
button { margin: 10px; }
</style>
</head>
<body>
<div id="player">
<audio id="myAudio">
<source src="your-music-file.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<button onclick="playAudio()">播放音乐</button>
<button onclick="pauseAudio()">暂停音乐</button>
<button onclick="stopAudio()">停止音乐</button>
</div>
<script>
var myAudio = document.getElementById('myAudio');
function playAudio() {
myAudio.play();
}
function pauseAudio() {
myAudio.pause();
}
function stopAudio() {
myAudio.pause();
myAudio.currentTime = 0;
}
</script>
</body>
</html>
在这个示例中,我们创建了一个简单的音乐播放器,包含播放、暂停和停止音乐的按钮。你需要将 "your-music-file.mp3"
替换为你的音乐文件路径。这个播放器使用了HTML5的 <audio>
元素和CSS进行样式设置,以及JavaScript来处理播放、暂停和停止音乐的逻辑。
评论已关闭