利用html,css,JavaScript写一个音乐播放器的代码
时间: 2024-01-20 21:04:27 浏览: 37
以下是一个简单的基于HTML,CSS和JavaScript的音乐播放器代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Music Player</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Music Player</h1>
<audio id="player" src="music.mp3"></audio>
<div class="controls">
<button id="play" class="btn">Play</button>
<button id="pause" class="btn">Pause</button>
<button id="stop" class="btn">Stop</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
.container {
text-align: center;
margin-top: 50px;
}
.controls {
margin-top: 20px;
}
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
input[type=range] {
-webkit-appearance: none;
width: 50%;
height: 5px;
background: #ddd;
outline: none;
border-radius: 5px;
margin-left: 10px;
}
input[type=range]:hover {
background: #ccc;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%;
height: 20px;
width: 20px;
background: #4CAF50;
margin-top: -8px;
}
```
JavaScript代码:
```
const player = document.getElementById('player');
const playBtn = document.getElementById('play');
const pauseBtn = document.getElementById('pause');
const stopBtn = document.getElementById('stop');
const volumeSlider = document.getElementById('volume');
playBtn.addEventListener('click', () => {
player.play();
});
pauseBtn.addEventListener('click', () => {
player.pause();
});
stopBtn.addEventListener('click', () => {
player.pause();
player.currentTime = 0;
});
volumeSlider.addEventListener('input', () => {
player.volume = volumeSlider.value;
});
```
这个音乐播放器有三个按钮:播放、暂停和停止。还有一个用于控制音量的滑块。你可以将 `music.mp3` 替换为你自己的音乐文件。