帮我用PHP80写一个音乐播放器要求漂亮可商用点击即可播放音乐
以下是一个简单的音乐播放器示例,使用PHP 8.0编写:
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<style>
.playlist {
list-style: none;
padding: 0;
}
.playlist li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul class="playlist">
<li data-src="music1.mp3">歌曲1</li>
<li data-src="music2.mp3">歌曲2</li>
<li data-src="music3.mp3">歌曲3</li>
</ul>
<audio controls id="audioPlayer">
<source src="" type="audio/mpeg">
</audio>
<script>
const playlist = document.querySelectorAll('.playlist li');
const audioPlayer = document.getElementById('audioPlayer');
playlist.forEach((item) => {
item.addEventListener('click', () => {
const src = item.getAttribute('data-src');
audioPlayer.src = src;
audioPlayer.play();
});
});
</script>
</body>
</html>
这个示例中,我们使用<ul>和<li>元素创建了一个音乐播放列表。每个<li>元素代表一首歌曲,使用data-src属性存储歌曲的URL。
在<audio>元素中,我们使用了controls属性来显示音乐播放器的控件,然后使用<source>元素来指定音乐文件的URL。
通过JavaScript,我们为每个播放列表项绑定了一个点击事件,当用户点击某个歌曲时,会将对应歌曲的URL赋值给<audio>元素的src属性,并调用play()方法开始播放。
请注意,这只是一个基本的示例,你可以根据自己的需求进行修改和扩展,例如添加更多的歌曲、样式美化、播放控制等
原文地址: http://www.cveoy.top/t/topic/hY2J 著作权归作者所有。请勿转载和采集!