从 Markdown 创建 Cue 文件

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。从 200 美元的免费信用额度 开始!

非常具体,对吧?虽然我们要做的正是标题所说的,但这篇文章更多的是关于学习练习和如何在互联网上获得帮助的示例。

我的播客编辑 Chris Enns 始终在寻找改进工作和提升播客质量的方法。一种比较酷的方法是提供“章节”,以便人们可以在播客中跳转到特定点。

通过 TimeJump,我们已经在网站本身提供了该功能。这些以哈希链接的形式出现,例如:#t=12:18。信不信由你,在某些播客收听器(播客收听应用程序)中,节目说明中的此类相对链接实际上有效。

使用 TimeJump JavaScript 库跳转音频元素。

但使用“章节”可能是处理此问题的更正确方法。使用章节,播客收听器可以提供其自己的原生 UI 来显示和允许用户在章节之间跳转。

甚至 iOS 11 也 开始在播客应用程序中支持它们

这是内置于 iOS 的播客应用程序,但各种不同的播客收听器都以自己的方式显示章节。

如何将它们添加到播客中?我不是这方面的专家,但有一个名为 Podcast Chapters 的原生 Mac 应用程序可以做到这一点

这正是 Chris Enns 用于添加章节的方法,这让我们想到了 Chris 的工作流程。Chris 为播客撰写节目说明,并使用 Markdown 格式进行撰写。他编辑的节目(至少其中一些)会在网上发布节目说明,并且为其提供支持的 CMS 使用 Markdown。

他会创建一个 Markdown 列表(与 TimeJump 兼容),其中列出了播客中发生的事情,如下所示

* **[1:49](#t=1:49)** Toys from the future.
* **[8:40](#t=8:40)** Talking about flip.

这里还有另一块拼图,即 Podcast Chapters 应用程序通过提供一个 `.cue` 文件来完成其工作。Cue 文件如下所示

PERFORMER "ShopTalk Show"
  TITLE "Episode 273"
  FILE "shoptalk-273.mp3" MP3
    TRACK 01 AUDIO
      PERFORMER ""
      TITLE "Toys from the future."
      INDEX 01 01:49:00
    TRACK 02 AUDIO
      PERFORMER ""
      TITLE "Talking about flip."
      INDEX 01 08:40:00

这是一个非常具体的格式。当然,它是可以手动编写的,但它基本上包含与 Markdown 列表相同的所有数据,只是格式不同。

甚至还有一个 在线生成器 可以帮助创建它们


我刚刚解释的所有内容,我之所以了解,是因为 Chris 本人解释了。**这是我最喜欢的一部分。**他通过一个 YouTube 视频寻求帮助来解释它,使问题一目了然。

Chris 确切地知道他需要什么才能使此工作流程有效,但他无法弄清楚其中的一小部分,因此他寻求帮助。

说实话,我也不知道如何解决它。但是,也许,也许我多知道一点点,足以开始这个过程。

  1. 我知道如何制作一个在这里可以完成工作的界面:并排的 <textarea>,以便于复制粘贴。
  2. 我知道 JavaScript 可以完成此操作,因为它可以从文本区域中获取字符串值,并且拥有大量字符串处理方法。
  3. 我知道这可能是正则表达式的领域。

我还知道这是我能力边缘的编程内容。我敢打赌我可以做到,但这可能需要我一整天的时间,并且会对我构成真正的挑战。

因此,我再次将问题设置好,以便其他人可以介入并提供帮助。

我编写了一个脚本(“编剧或戏剧意义上的脚本”)来解释我认为需要发生的事情。我 制作了一个 CodePen,并在 JavaScript 区域中写下了……

/*
 Step 1
   Break markdown in first textarea into array of lines
   Loop over each line
   
Step 2
  Extract value "1:49" from line
  
Step 3
  Convert value to "01:49:00"
  
Step 4
  Extract value "Toys from the future." from line
  
Step 5 
  Place these two values into a template you can see in the second textarea 
*/

然后 James Padolsey 介入并帮助完成了最终的解决方案

查看 James Padolsey 制作的 CodePen WIP: 从 Markdown 创建 Cue 文件@padolsey)在 CodePen 上。

它完全实现了每个人希望它实现的功能!感谢 James!

它基本上做了我在我的小脚本中列出的内容。

按换行符拆分并循环遍历数组

markdown.split('\n').map((line, i) => {

提取最适合处理的字符串部分

const title = line.split('** ')[1];
const time = line.match(/\d+:\d+/)[0];

然后将这些片段整理成形,并最终使用 模板字面量 来制作一个新的字符串,并将其放回文本区域中。

我确信这不是唯一的方法,您可能会对这种解析类型的脆弱性和可能存在的笨拙性质感到犹豫。但它也 解决了 一个非常真实且迫在眉睫的工作流程问题。