音乐播放器 html
时间: 2023-11-11 09:01:00 浏览: 38
好的,你需要一个音乐播放器的 HTML 代码,是吗?以下是一个简单的示例:
```html
<audio controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
其中,`src` 属性指定音乐文件的 URL,`type` 属性指定音乐文件的 MIME 类型。`controls` 属性会在播放器下方显示控制条。
如果你需要更多的功能,可以使用 JavaScript 或第三方库来实现。
相关问题
音乐播放器html
以下是一个简单的 HTML 音乐播放器的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<meta charset="utf-8">
<style>
.player {
display: flex;
align-items: center;
font-size: 18px;
margin: 20px;
}
.player-info {
margin-right: 20px;
flex: 1;
}
.player-controls {
display: flex;
align-items: center;
flex: 1;
}
.player-controls button {
margin-right: 10px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
.player-progress {
display: flex;
align-items: center;
flex: 1;
height: 20px;
background-color: #ddd;
border-radius: 10px;
}
.player-progress-bar {
height: 100%;
background-color: #4CAF50;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="player">
<div class="player-info">
<p>歌曲名:Beyond - 海阔天空</p>
</div>
<div class="player-controls">
<button id="play-btn">播放</button>
<button id="pause-btn">暂停</button>
</div>
<div class="player-progress">
<div class="player-progress-bar" id="progress-bar"></div>
</div>
</div>
<audio id="music" src="Beyond - 海阔天空.mp3"></audio>
<script>
const music = document.getElementById('music');
const playBtn = document.getElementById('play-btn');
const pauseBtn = document.getElementById('pause-btn');
const progressBar = document.getElementById('progress-bar');
playBtn.addEventListener('click', function() {
music.play();
});
pauseBtn.addEventListener('click', function() {
music.pause();
});
music.addEventListener('timeupdate', function() {
const progress = music.currentTime / music.duration * 100;
progressBar.style.width = progress + '%';
});
</script>
</body>
</html>
```
这个播放器包含一个歌曲名的文本区域,两个控制按钮(播放和暂停),以及一个显示播放进度的进度条。点击播放按钮可以开始播放音乐,点击暂停按钮可以暂停音乐。进度条会根据当前播放时间自动更新。
简易音乐播放器html5代码
<!DOCTYPE html>
<html>
<head>
<title>简易音乐播放器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 30px;
}
audio {
display: block;
margin: 20px auto;
}
.controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 20px auto;
width: 200px;
}
.controls button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 100px;
}
.controls button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>简易音乐播放器</h1>
<audio id="myAudio" controls>
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="controls">
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
<button onclick="stopAudio()">停止</button>
</div>
<script>
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
function stopAudio() {
audio.pause();
audio.currentTime = 0;
}
</script>
</body>
</html>