Skip to content

播客节目栏

概述

我们为网站添加了一个新的长条状播客播放器组件，用于在博客文章中内联显示播客播放条。这个播放条提供了现代化的音频播放体验，包括进度控制、播放速度调节等功能。

功能特性

  • 长条状设计: 紧凑的水平布局，适合在文章中内联显示
  • 响应式设计: 在移动设备上自动调整为垂直布局
  • 播放控制: 播放/暂停按钮，带有直观的图标切换
  • 进度控制: 可点击的进度条，支持跳转到指定时间点
  • 播放速度: 支持多种播放速度切换 (0.75x, 1x, 1.25x, 1.5x, 1.75x, 2x)
  • 时间显示: 显示当前播放时间和总时长
  • 暗色模式支持: 自动适应网站的暗色模式主题

使用方法

1. 在文章 Front Matter 中设置播客单集链接

在你的博客文章的 front matter 中添加 podcast_episode_url 字段：

---
title: "我的博客文章"
date: 2025-06-16
podcast_episode_url: "/zh/podcast/ep-001-beijing-car-lottery/"
---

2. 播客单集的数据结构

确保你的播客单集包含以下必要字段：

---
title: "播客单集标题"
date: 2025-05-18 08:12:03+08:00
categories:
- "播客分类"
audio_url: "https://example.com/podcast.mp3"
audio_type: "audio/mpeg"
duration: "8:06"
episode_image_url: "https://example.com/episode-image.jpg"
---

3. 自动渲染

当博客文章包含 podcast_episode_url 字段时，播客播放条会自动在文章内容之前显示。

样式组件

播客播放条包含以下主要组件：

  • 播客封面: 60x60px 的圆角图片
  • 播客信息: 标题、分类标签和发布日期
  • 播放控件: 播放按钮、进度条、时间显示和速度控制

技术实现

文件结构

  • layouts/_default/episode_bar.html - 播客播放条的 Hugo 模板
  • assets/scss/templates/_podcast-episode-bar.scss - 播客播放条的样式文件
  • assets/js/audio-player.js - JavaScript 播放控制逻辑（已扩展）

CSS 类名

主要的 CSS 类名包括：

  • .podcast-episode-bar - 主容器
  • .episode-bar-container - 内容容器
  • .episode-bar-image - 封面图片区域
  • .episode-bar-content - 内容区域
  • .episode-bar-controls - 播放控件区域
  • .episode-bar-play-btn - 播放按钮
  • .episode-bar-progress - 进度条
  • .episode-bar-speed-btn - 速度控制按钮

响应式行为

  • 桌面端: 水平布局，封面在左，内容和控件在右
  • 移动端: 垂直布局，封面在上，内容和控件在下
  • 平板端: 自动适应屏幕大小

播放器交互

  • 播放/暂停: 点击播放按钮切换播放状态
  • 进度跳转: 点击进度条的任意位置跳转到对应时间点
  • 速度调节: 点击速度按钮循环切换播放速度
  • 多播放器管理: 播放新音频时自动暂停其他正在播放的音频

注意事项

  1. 确保音频文件的 URL 可访问
  2. 建议使用 MP3 格式的音频文件以获得最佳兼容性
  3. 播客封面图片建议使用正方形比例
  4. 在测试环境中验证播放功能是否正常工作

示例

以下是一个完整的使用示例：

博客文章 (content/zh/blog/my-post.md):

---
title: "关于北京摇号的思考"
date: 2025-06-16
podcast_episode_url: "/zh/podcast/ep-001-beijing-car-lottery/"
---

这篇文章讨论了北京小客车摇号的相关问题...

播客单集 (content/zh/podcast/ep-001-beijing-car-lottery/index.md):

---
title: "北京小客车摇号深度探讨"
date: 2025-05-18 08:12:03+08:00
categories:
- "Jimmy 的播客"
audio_url: "https://assets.jimmysong.io/podcasts/audios/ep-001.mp3"
audio_type: "audio/mpeg"
duration: "8:06"
episode_image_url: "https://assets.jimmysong.io/podcasts/images/ep-001.jpg"
---

这样设置后，在博客文章中就会自动显示一个美观的播客播放条。