<!DOCTYPE html>
<html>
<head>
<title>PHP 音乐播放器</title>
<style>
.playlist {
list-style: none;
padding: 0;
}
<p>.playlist li {
margin-bottom: 10px;
}
</style></p>
</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>
这个示例使用PHP 8.0 创建一个简单音乐播放器。使用`<ul>` 和 `<li>` 元素创建一个播放列表,每个 `<li>` 元素代表一首歌曲,使用 `data-src` 属性存储歌曲的URL。使用`<audio>` 元素显示播放器控件,并使用 `<source>` 元素指定音乐文件URL。通过JavaScript,为每个播放列表项绑定点击事件,点击歌曲时将URL赋值给`<audio>` 元素的`src`属性,并调用`play()` 方法开始播放。这个示例是一个基础,你可以根据需求添加更多歌曲、样式美化、播放控制等功能。

原文地址: https://www.cveoy.top/t/topic/pH9s 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录