refactor: 聆韵改为列表直接播放模式——圆形按钮一键播放，无需跳转详情页

page-music.php

@@ -18,22 +18,25 @@ $query = new WP_Query(array(
 <?php if ($query->have_posts()) : ?>
     <div class="music-list">
         <?php while ($query->have_posts()) : $query->the_post(); ?>
-            <a href="<?php echo home_url("/?music=" . get_the_ID()); ?>" class="music-item">
-                <?php if (has_post_thumbnail()) : ?>
-                    <div class="music-item__cover">
-                        <?php the_post_thumbnail('thumbnail', array('alt' => get_the_title())); ?>
-                        <span class="music-item__play">▶</span>
-                    </div>
-                <?php else : ?>
-                    <div class="music-item__cover music-item__cover--empty">
-                        <span>🎵</span>
-                    </div>
-                <?php endif; ?>
+            <div class="music-item">
+                <div class="music-item__cover" onclick="togglePlay(this)">
+                    <span class="music-item__play-icon">▶</span>
+                </div>
                 <div class="music-item__body">
                     <span class="music-item__title"><?php the_title(); ?></span>
+                    <span class="music-item__desc"><?php echo esc_html(wp_strip_all_tags(get_the_content())); ?></span>
                     <span class="music-item__author"><?php the_author_meta('display_name'); ?> · <?php echo get_the_date('Y-m-d'); ?></span>
                 </div>
-            </a>
+                <?php
+                // 从正文中提取 audio src
+                $content = get_the_content();
+                $audio_src = '';
+                if (preg_match('/<audio[^>]+src="([^"]+)"/', $content, $m)) {
+                    $audio_src = $m[1];
+                }
+                ?>
+                <audio class="music-item__audio" preload="none" src="<?php echo esc_url($audio_src); ?>" style="display:none"></audio>
+            </div>
         <?php endwhile; ?>
     </div>
     <?php wp_reset_postdata(); ?>
@@ -44,4 +47,30 @@ $query = new WP_Query(array(
     </div>
 <?php endif; ?>
 
+<script>
+(function() {
+    var current = null;
+    window.togglePlay = function(el) {
+        var item = el.closest('.music-item');
+        var audio = item.querySelector('.music-item__audio');
+        var icon = el.querySelector('.music-item__play-icon');
+        if (!audio) return;
+        
+        if (current && current !== audio) {
+            current.pause();
+            current.closest('.music-item').querySelector('.music-item__play-icon').textContent = '▶';
+        }
+        
+        if (audio.paused) {
+            audio.play();
+            icon.textContent = '⏸';
+        } else {
+            audio.pause();
+            icon.textContent = '▶';
+        }
+        current = audio;
+    };
+})();
+</script>
+
 <?php get_footer(); ?>