音乐示例代码有吗?
<!DOCTYPE html><html>
<head>
<title>音乐播放器</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h2 {
margin-top: 0;
}
audio {
width: 100%;
margin-bottom: 20px;
}
.file-input-container {
text-align: left;
margin-bottom: 20px;
}
.file-input-container label {
display: inline-block;
padding: 10px 20px;
background-color: #2196f3;
color: #fff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.file-input-container label:hover {
background-color: #0d8bf7;
}
.file-input-container input {
display: none;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #2196f3;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0d8bf7;
}
.lyrics {
text-align: left;
margin-top: 20px;
white-space: pre-wrap;
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h2>音乐播放器</h2>
<audio id="audio" controls>
<source src="" type="audio/mpeg">
</audio>
<div class="file-input-container">
<label for="fileInput">选择音乐文件</label>
<input type="file" id="fileInput">
</div>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<div class="lyrics" id="lyricsContainer"></div>
<script>
var audio = document.getElementById('audio');
var playBtn = document.getElementById('playBtn');
var pauseBtn = document.getElementById('pauseBtn');
var fileInput = document.getElementById('fileInput');
var lyricsContainer = document.getElementById('lyricsContainer');
playBtn.addEventListener('click', function() {
audio.play();
});
pauseBtn.addEventListener('click', function() {
audio.pause();
});
fileInput.addEventListener('change', function(e) {
var file = e.target.files;
var url = URL.createObjectURL(file);
audio.src = url;
audio.play(); // 自动开始播放
});
// 歌词显示示例，需要替换为实际的歌词数据
var lyricsData = `
歌词第一行
歌词第二行
歌词第三行
`;
// 将歌词数据显示在页面上
lyricsContainer.textContent = lyricsData;
</script>
</div>
</body>
</html>
页:
[1]