PHP 网站播放按钮实现

在 PHP 网站中实现播放按钮功能通常需要结合 HTML、CSS、JavaScript 和 PHP 后端处理。以下是几种常见的播放按钮实现方式：

1. 音频播放按钮

PHP 部分（生成播放器）

php

<?php
// 音频文件数据（可以从数据库获取）
$audioFiles = [
    ['
' => 1, 'title' => '示例音频1', 'file' => 'audio/sample1.mp3'],
    ['id' => 2, 'title' => '示例音频2', 'file' => 'audio/sample2.mp3'],
];
?>

<!-- 播放列表 -->
<div class="audio-player-container">
    <?php foreach ($audioFiles as $audio): ?>
        <div class="audio-item" data-src="<?php echo htmlspecialchars($audio['file']); ?>">
            <button class="play-btn">▶</button>
            <span class="audio-title"><?php echo htmlspecialchars($audio['title']); ?></span>
            <audio class="audio-element" src="<?php echo htmlspecialchars($audio['file']); ?>"></audio>
        </div>
    <?php endforeach; ?>
</div>

CSS 样式

css

.audio-player-container {
    max-width: 500px;
    margin: 20px auto;
}

.audio-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

.play-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #4CAF50;
    color: white;
    cursor: pointer;
    margin-right: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-btn.playing {
    background: #f44336;
}

.audio-title {
    flex-grow: 1;
}

JavaScript 功能

javascript

document.addEventListener('DOMContentLoaded', function() {
    const playBtns = document.querySelectorAll('.play-btn');
    let currentAudio = null;
    let currentBtn = null;
    
    playBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const audioItem = this.parentElement;
            const audio = audioItem.querySelector('.audio-element');