php实现歌曲连播
实现歌曲连播的基本思路
歌曲连播功能通常涉及播放列表管理、音频播放控制和前端交互。PHP主要用于后端逻辑处理，前端通常结合HTML5的<audio>标签或JavaScript音频库实现连续播放。
后端PHP部分：播放列表管理
创建数据库表存储歌曲信息，例如：
CREATE TABLE songs (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255),
artist VARCHAR(255),
file_path VARCHAR(255),
duration INT
);编写PHP接口获取播放列表：
<?php
header('Content-Type: application/json');
$db = new PDO('mysql:host=localhost;dbname=music', 'username', 'password');
$query = $db->query("SELECT id, title, artist, file_path FROM songs");
echo json_encode($query->fetchAll(PDO::FETCH_ASSOC));
?>前端HTML和JavaScript部分
使用HTML5 audio元素配合JavaScript实现连续播放：
<audio id="player" controls></audio>
<ul id="playlist"></ul>
<script>
let currentTrack = 0;
const playlist = [
{title: "Song 1", file: "song1.mp3"},
{title: "Song 2", file: "song2.mp3"}
];
const player = document.getElementById('player');
const playlistElement = document.getElementById('playlist');
// 渲染播放列表
playlist.forEach((song, index) => {
const li = document.createElement('li');
li.textContent = song.title;
li.addEventListener('click', () => playSong(index));
playlistElement.appendChild(li);
});
// 播放指定歌曲
function playSong(index) {
currentTrack = index;
player.src = playlist[index].file;
player.play();
}
// 歌曲结束时自动播放下一首
player.addEventListener('ended', () => {
currentTrack = (currentTrack + 1) % playlist.length;
playSong(currentTrack);
});
// 初始播放第一首
playSong(0);
</script>动态加载播放列表
通过AJAX从PHP后端获取播放列表：
fetch('get_playlist.php')
.then(response => response.json())
.then(playlist => {
// 使用获取的播放列表初始化播放器
});进阶功能实现
添加随机播放功能：
function shufflePlaylist() {
for (let i = playlist.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[playlist[i], playlist[j]] = [playlist[j], playlist[i]];
}
currentTrack = 0;
playSong(currentTrack);
}实现播放进度保存：
// 保存当前播放位置
window.addEventListener('beforeunload', () => {
localStorage.setItem('lastPlayed', currentTrack);
});
// 恢复播放位置
const lastPlayed = localStorage.getItem('lastPlayed');
if(lastPlayed) {
playSong(parseInt(lastPlayed));
}服务器配置注意事项
确保音频文件MIME类型正确配置，在Apache的.htaccess中添加：
AddType audio/mpeg mp3
AddType audio/ogg ogg
AddType audio/wav wav对于Nginx，在配置中添加：
location ~ \.(mp3|ogg|wav)$ {
types {
audio/mpeg mp3;
audio/ogg ogg;
audio/wav wav;
}
}
