新增语音转文字效果

我做了一个栏目叫做“有话直说”，用于表达负面或激烈的情绪。以语音的形式来直观生动地呈现，同时在 RSS 结果中排除，避免被搜索引擎爬取。我感觉不错，但是obaby说要加语音转文字。怎么办呢？自己的榜一自己宠，连夜做了功能。

分享一下设计思路。前端比较简单，就是点击后向下展开一个气泡框。前端唯一的思考就是怎么做点击交互，首先当然是参考微信，但是存在两个问题。一是长按语音条呼出操作界面，在手机端比较自然——得益于微信等软件的用户习惯培养——但是在电脑端这就很怪。二是微信长按呼出的是一组功能键，而我只有一个功能。长按呼出界面，再点击里面唯一的按钮，这就是典型的脱裤子放屁。最终我的方案是在语音条上显式地放置一个图标 作为按钮。

再来说后端。我只是要做语音转文字的【效果】，并不需要真实的即时转换，实现起来就是将整理好的文字录入后台。那么最大的难点是怎样保存这个文本。最简单的就是用一组闭合标签包裹，例如：

[voice2text]语音转文字的文本内容[/voice2text]

如此可以实现功能，但问题是——丑陋。凭空自创一种规则，就是打没人懂的补丁。

我希望在正统的Markdown规则下实现。我想到了title属性，它表示悬停文字，非常契合语音的文字转义的概念。所以问题来到了我的知识盲区——Markdown如何实现title属性，然后我找到了：

[这是一个链接](https://example.com "这是一个提示信息")

生成的 html 是：

<a href="https://example.com" title="这是一个提示信息">这是一个链接</a>

结合我实际情况写法是这样的：

[][1]

  [1]: 10aavit.mp3 "刚刚闹了个乌龙，小区的电动车停车位"

这样就优雅地在规则之内实现了。

说明一下我底层实现逻辑：

原始数据（数据库存储）是 Markdown 格式。首先由 PHP 将 Markdown 纯文本转义为 html 代码，再从 html 解析为语法树，最后从语法树筛选出当前页面所需的数据，封装为 json 传递给前端 JS。最终在浏览器呈现的是 JS 根据对象数据渲染的，与最初 Markdown 转义的 html 代码没有直接关系。

本文只探讨了从 Markdown 转义到 html，增加title属性的实现。