当前位置:首页 > PHP

php实现音乐搜索功能

2026-02-28 01:25:18PHP

数据库设计

创建数据库表存储音乐信息,至少包含字段:idtitleartistalbumfile_path。MySQL示例:

CREATE TABLE music (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    artist VARCHAR(255),
    album VARCHAR(255),
    file_path VARCHAR(255)
);

搜索表单

HTML前端创建搜索表单,提交到PHP处理页面:

php实现音乐搜索功能

<form action="search.php" method="get">
    <input type="text" name="keyword" placeholder="输入歌曲名或歌手">
    <button type="submit">搜索</button>
</form>

PHP搜索处理

使用PDO连接数据库并执行搜索,防止SQL注入:

php实现音乐搜索功能

<?php
$keyword = $_GET['keyword'] ?? '';
if (!empty($keyword)) {
    try {
        $pdo = new PDO('mysql:host=localhost;dbname=music_db', 'username', 'password');
        $stmt = $pdo->prepare("SELECT * FROM music WHERE title LIKE :keyword OR artist LIKE :keyword");
        $stmt->execute([':keyword' => "%$keyword%"]);
        $results = $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        die("数据库连接失败: " . $e->getMessage());
    }
}
?>

结果展示

循环输出搜索结果并包含播放链接:

<?php if (!empty($results)): ?>
    <ul>
        <?php foreach ($results as $song): ?>
            <li>
                <h3><?= htmlspecialchars($song['title']) ?></h3>
                <p>歌手: <?= htmlspecialchars($song['artist']) ?></p>
                <audio controls src="<?= htmlspecialchars($song['file_path']) ?>"></audio>
            </li>
        <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p>没有找到匹配的歌曲</p>
<?php endif; ?>

高级搜索优化

添加模糊搜索和分页功能:

// 分页处理
$page = $_GET['page'] ?? 1;
$limit = 10;
$offset = ($page - 1) * $limit;

$stmt = $pdo->prepare("SELECT * FROM music 
                      WHERE title LIKE :keyword 
                      OR artist LIKE :keyword 
                      LIMIT $limit OFFSET $offset");

性能优化建议

  1. titleartist字段添加全文索引
  2. 使用缓存技术存储热门搜索结果
  3. 实现异步AJAX搜索减少页面刷新

分享给朋友:

相关文章

vue实现音乐

vue实现音乐

Vue 实现音乐播放器 在 Vue 中实现音乐播放器可以通过 HTML5 的 <audio> 元素或第三方库如 howler.js 来实现。以下是几种常见的实现方法: 使用 HTML5…

vue实现音乐跳转

vue实现音乐跳转

使用 Vue 实现音乐跳转功能 在 Vue 中实现音乐跳转功能,通常需要结合 HTML5 的 <audio> 元素和 Vue 的数据绑定及事件处理机制。以下是实现音乐跳转的几种常见方法。…

Vue加音乐功能实现

Vue加音乐功能实现

Vue 中实现音乐播放功能 基本音频播放实现 在 Vue 项目中可以通过 HTML5 的 <audio> 元素实现基础音乐播放功能。在组件模板中添加 <audio> 元素并绑定…

网易云音乐vue实现

网易云音乐vue实现

实现网易云音乐Vue项目的基本步骤 项目初始化与依赖安装 使用Vue CLI创建项目框架,安装必要依赖如vue-router、axios、vuex等。网易云音乐API可使用开源项目NeteaseClo…

Django加Vue实现音乐

Django加Vue实现音乐

Django 后端搭建 安装 Django 和相关依赖: pip install django djangorestframework django-cors-headers 创建 Django 项…

react-如何实现接口搜索功能

react-如何实现接口搜索功能

实现接口搜索功能的步骤 在React中实现接口搜索功能通常涉及以下几个关键部分:状态管理、API调用、用户输入处理和结果展示。 状态管理 使用useState来管理搜索输入和搜索结果的状态。需要定义…