[网页]：豆包Html定制 – 专属mp3播放器界面

关键词：html、宝塔面包、豆包 AI

成品预览：音乐播放器展示页 – 执迷者 X ，因该页面造成网页访问卡顿，目前暂未找到优化方法，且考虑版权问题，该模块暂时下架。具体流程可以参照下列教程快速复刻。

第一步：AI 生成播放界面

利用豆包 AI 生成一个预设的网页播放界面，这个界面可以播放 mp3 文件，且支持通过 AI 调整色彩、字体、动效和布局细节，同时具备上传文件的交互功能。

第二步：上传至服务器

将生成的音乐播放器代码保存为 HTML 文件，并借助宝塔面板上传至网站后台，实现文件的管理与目录操作。上传之前，先通过编辑器来替换模板中部分外链和数据。

开始上传：导航到您的 WordPress 网站根目录，点击 ” 新建目录 ”，命名为 music-player，点击 ” 上传 ”，选择您创建的 music-player.html文件。本次我是放在 puock 子主题下的目录。

第三步：配置 PHP 后端

在宝塔面板中，对上传的 HTML 文件进行内容替换和修改，同时在 PHP 文件中调整相关配置，创建一个新的音乐播放器 PHP 文件，以实现音乐播放器的完整功能。

通过宝塔面板进入 WordPress 主题目录：/www/wwwroot/ 您的域名 /wp-content/themes/puock/

创建一个新文件 page-music-player.php

添加以下代码：

<?php
/*
Template Name: 音乐播放器
*/
get_header();
?>

<div style="position: relative; width: 100%; height: 100vh;">
    <iframe 
        src="<?php echo get_stylesheet_directory_uri(); ?>/music-player/index.html" 
        style="width: 100%; height: 100%; border: none;"
        title="音乐播放器"
    ></iframe>
</div>

<?php get_footer(); ?>

1. 创建短代码 在主题的 functions.php 文件中添加：

// 添加音乐播放器短代码
function music_player_shortcode($atts) {
    $atts = shortcode_atts(array(
        'width' => '100%',
        'height' => '600px'
    ), $atts);
    
    return '<iframe src="' . get_stylesheet_directory_uri() . '/music-player/index.html" 
            style="width:' . esc_attr($atts['width']) . '; 
                   height: '. esc_attr($atts['height']) .'; 
                   border: none; border-radius: 12px;"title="Harmony 音乐播放器 "></iframe>';
}
add_shortcode('music_player', 'music_player_shortcode');