 GPT答： |
7i24.cn
|
<!DOCTYPE html>
<html>
<head>
<title>HTML音乐播放器</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #333333;
margin-top: 50px;
}
.container{
width : 500px;
margin : auto;
background-color : white;
padding :20px;
}
audio{
width :100%;
}
button{
background-color:#4CAF50 ;
border:none ;
color:white ;
padding :10px ;
text-align:center ;
text-decoration:none ;
display:inline-block ;
font-size:16px ;
margin-top :20px ;
cursor:pointer ;
}
button:hover{
opacity:.7
}
</style>
</head>
<body>
<div class="container">
<h1>HTML音乐播放器</h1>
<audio controls="">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick = "document.getElementsByTagName('audio')[0].play()">播放</button>
<button onclick = "document.getElementsByTagName('audio')[0].pause()">暂停</button>
<button onclick = "document.getElementsByTagName('audio')[0].currentTime +=10">快进10秒钟</button>
<button onclick = "document.getElementsByTagName('audio')[0].currentTime -=10">后退10秒钟 </button>
</div>
</body>
</html>
注释：这是一个简单的 HTML 音乐播放器，使用了 HTML5 的 <audio> 元素。其中包含了四个按钮，分别用于控制音频的 播放、暂停、快进和后退。通过 JavaScript 调用 <audio> 元素的 play()、pause() 和 currentTime 属性来实现相应功能。
|
