[网页]：豆包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');