惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

P
Privacy & Cybersecurity Law Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
宝玉的分享
宝玉的分享
V
V2EX
爱范儿
爱范儿
Last Week in AI
Last Week in AI
美团技术团队
人人都是产品经理
人人都是产品经理
WordPress大学
WordPress大学
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 叶小钗
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Apple Machine Learning Research
Apple Machine Learning Research
Security Latest
Security Latest
C
Cybersecurity and Infrastructure Security Agency CISA
Know Your Adversary
Know Your Adversary
I
Intezer
K
Kaspersky official blog
阮一峰的网络日志
阮一峰的网络日志
大猫的无限游戏
大猫的无限游戏
T
Tenable Blog
AWS News Blog
AWS News Blog
小众软件
小众软件
博客园 - 司徒正美
Cyberwarzone
Cyberwarzone
NISL@THU
NISL@THU
博客园 - 三生石上(FineUI控件)
C
CERT Recently Published Vulnerability Notes
博客园 - 聂微东
量子位
有赞技术团队
有赞技术团队
S
Schneier on Security
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
S
Secure Thoughts
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
Hugging Face - Blog
Hugging Face - Blog
V
Visual Studio Blog
Google DeepMind News
Google DeepMind News
L
Lohrmann on Cybersecurity
P
Palo Alto Networks Blog
P
Privacy International News Feed
L
LINUX DO - 最新话题
博客园 - Franky
雷峰网
雷峰网
月光博客
月光博客
Hacker News: Ask HN
Hacker News: Ask HN
Forbes - Security
Forbes - Security
博客园 - 【当耐特】
C
Cyber Attacks, Cyber Crime and Cyber Security

张鑫旭-鑫空间-鑫生活

1分钟速度了解text-align match-parent声明 « 张鑫旭-鑫空间-鑫生活 光标的形状也能设置了,就是CSS caret-shape属性 « 张鑫旭-鑫空间-鑫生活 pretext与文字四面环绕效果的实现 « 张鑫旭-鑫空间-鑫生活 JSON.rawJSON方法的作用是什么? « 张鑫旭-鑫空间-鑫生活 如何使用CSS判断鼠标从哪个方向进入元素? « 张鑫旭-鑫空间-鑫生活 借助mediabunny纯JS实现视频水印、剪裁、合成等功能 « 张鑫旭-鑫空间-鑫生活 务必谨慎使用JS WeakRef弱引用 « 张鑫旭-鑫空间-鑫生活 CSS六边形头像的实现与蜂巢布局 « 张鑫旭-鑫空间-鑫生活 CSS corner-shape与背景底纹技术 « 张鑫旭-鑫空间-鑫生活 浅学WebTransport API:下一代Web双向通信技术 « 张鑫旭-鑫空间-鑫生活 HTML dialog元素新支持了closedBy属性 « 张鑫旭-鑫空间-鑫生活 HTML interestfor属性与悬停popover交互效果 « 张鑫旭-鑫空间-鑫生活 CSS3模拟window7炫酷界面效果展示 « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 纯js无图片无外链CSS图片幻灯片播放插件 « 张鑫旭-鑫空间-鑫生活 CSS border三角、圆角图形生成技术简介 « 张鑫旭-鑫空间-鑫生活 CSS “渐进增强”在web制作中常见应用举例 « 张鑫旭-鑫空间-鑫生活 让IE6/IE7/IE8浏览器支持CSS3属性 « 张鑫旭-鑫空间-鑫生活 jQuery – 高亮动态显示页面HTML代码插件 « 张鑫旭-鑫空间-鑫生活 翻译 – 逐渐消失的Flash网站 « 张鑫旭-鑫空间-鑫生活 CSS reset的重新审视 – 避免样式重置 « 张鑫旭-鑫空间-鑫生活 新浪微博插入话题后部分文字选中的js实现 « 张鑫旭-鑫空间-鑫生活 JavaScript实现http地址自动检测并添加URL链接 « 张鑫旭-鑫空间-鑫生活 CSS实现兼容性的渐变背景(gradient)效果 « 张鑫旭-鑫空间-鑫生活 CSS content内容生成技术以及应用 « 张鑫旭-鑫空间-鑫生活 CSS gradient渐变之webkit核心浏览器下的使用 « 张鑫旭-鑫空间-鑫生活 CSS渐变之CSS3 gradient在Firefox3.6下的使用 « 张鑫旭-鑫空间-鑫生活 区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack « 张鑫旭-鑫空间-鑫生活 CSS实现跨浏览器兼容性的盒阴影效果 « 张鑫旭-鑫空间-鑫生活 CSS3&HTML5各浏览器支持情况一览表 « 张鑫旭-鑫空间-鑫生活 翻译 – CSS Sprites:实用技术还是生厌之物? « 张鑫旭-鑫空间-鑫生活 纯CSS实现易拉罐3D滚动效果 « 张鑫旭-鑫空间-鑫生活 纯CSS实现侧边栏/分栏高度自动相等 « 张鑫旭-鑫空间-鑫生活 CSS+JavaScript实现页面不同布局的切换 « 张鑫旭-鑫空间-鑫生活 JavaScript实现最简单的拖拽效果 « 张鑫旭-鑫空间-鑫生活 自己写的无图片版jQuery zxxbox弹出框插件 « 张鑫旭-鑫空间-鑫生活 中国古代道家思想与网页重构的思考 « 张鑫旭-鑫空间-鑫生活 让所有浏览器支持HTML5 video视频标签 « 张鑫旭-鑫空间-鑫生活 纯CSS实现各类气球泡泡对话框效果 « 张鑫旭-鑫空间-鑫生活 JS HEX十六进制与RGB, HSL颜色的相互转换 « 张鑫旭-鑫空间-鑫生活 CSS实现兼容性的渐变、高光等文字效果 « 张鑫旭-鑫空间-鑫生活 去除冗余 – 精简您的CSS样式代码 « 张鑫旭-鑫空间-鑫生活 对overflow与zoom”清除浮动”的一些认识 « 张鑫旭-鑫空间-鑫生活 jQuery Pagination Ajax分页插件中文详解 « 张鑫旭-鑫空间-鑫生活 absolute绝对定位的非绝对定位用法 « 张鑫旭-鑫空间-鑫生活 网页布局思想浅议-淘宝新版首页为实例 « 张鑫旭-鑫空间-鑫生活 回流与重绘:CSS性能让JavaScript变慢? « 张鑫旭-鑫空间-鑫生活 CSS float浮动的深入研究、详解及拓展(二) « 张鑫旭-鑫空间-鑫生活 CSS float浮动的深入研究、详解及拓展(一) « 张鑫旭-鑫空间-鑫生活 60个极富创造性的震撼的电影海报设计 « 张鑫旭-鑫空间-鑫生活 jQuery Lightbox(balupton版)图片展示插件讲解 « 张鑫旭-鑫空间-鑫生活 博客内嵌flash音乐播放器代码、下载与使用 « 张鑫旭-鑫空间-鑫生活 CSS3 animate实现图片墙3D翻转效果 « 张鑫旭-鑫空间-鑫生活 图片旋转效果的一些研究、jQuery插件及实例 « 张鑫旭-鑫空间-鑫生活 CSS3 border-image详解、应用及jQuery插件 « 张鑫旭-鑫空间-鑫生活 jQuery-两款不同原理的圆角插件讲解 « 张鑫旭-鑫空间-鑫生活 页面可用性之outline轮廓外框的一些研究 « 张鑫旭-鑫空间-鑫生活 CSS3 transition实现超酷图片墙动画效果 « 张鑫旭-鑫空间-鑫生活 HTML CSS列表元素ul,ol,dl的研究与应用 « 张鑫旭-鑫空间-鑫生活 jQuery图片文本滚动切换插件jCarousel中文翻译与详解 « 张鑫旭-鑫空间-鑫生活 酷酷的jQuery鼠标悬停图片放大切换显示效果 « 张鑫旭-鑫空间-鑫生活 IE6下z-index犯癫不起作用bug的初步研究 « 张鑫旭-鑫空间-鑫生活 checkbox复选框的一些深入研究与理解 « 张鑫旭-鑫空间-鑫生活 jQuery之使用slideToggle实现垂直下拉菜单 « 张鑫旭-鑫空间-鑫生活 jQuery-innerfade内部列表自动淡入淡出插件 « 张鑫旭-鑫空间-鑫生活 jQuery-火焰灯效果导航菜单 « 张鑫旭-鑫空间-鑫生活 IE下css bug集合-翻译自haslayout.net « 张鑫旭-鑫空间-鑫生活 翻译-IE7/8@font-face嵌入字体与文字平滑 « 张鑫旭-鑫空间-鑫生活 jQuery-马化腾产品设计与用户体验的一些技术实现 « 张鑫旭-鑫空间-鑫生活 像素的世界及其在web开发制作中的应用 « 张鑫旭-鑫空间-鑫生活 css行高line-height的一些深入理解及应用 « 张鑫旭-鑫空间-鑫生活 CSS实现圆角六色渐变自适应按钮详解 « 张鑫旭-鑫空间-鑫生活 我熟知的三种三栏网页宽度自适应布局方法 « 张鑫旭-鑫空间-鑫生活 jQuery照片图像剪裁插件Jcrop中文翻译详解 « 张鑫旭-鑫空间-鑫生活 Ajax Upload多文件上传插件翻译及中文演示 « 张鑫旭-鑫空间-鑫生活 告别图片—使用字符实现兼容性的圆角尖角效果beta版 « 张鑫旭-鑫空间-鑫生活 大小不固定的图片、多行文字的水平垂直居中 « 张鑫旭-鑫空间-鑫生活 jQuery boxy弹出层对话框插件中文演示及讲解 « 张鑫旭-鑫空间-鑫生活 JavaScript实现新浪微博文字放大显示动画效果 « 张鑫旭-鑫空间-鑫生活 翻译:让网络更快一些——最小化浏览器中的回流(reflow) « 张鑫旭-鑫空间-鑫生活 jQuery之addClasas与removeClass使用实例 « 张鑫旭-鑫空间-鑫生活 关于Google圆角高光高宽自适应按钮及其拓展 « 张鑫旭-鑫空间-鑫生活 JavaScript实现图片幻灯片滚动播放动画效果 « 张鑫旭-鑫空间-鑫生活 jQuery-鼠标经过显示大图并跟随鼠标效果插件 « 张鑫旭-鑫空间-鑫生活 关于gif图片(或png8)杂边锯齿的问题 « 张鑫旭-鑫空间-鑫生活 对html与body的一些研究与理解 « 张鑫旭-鑫空间-鑫生活 鲜为人知的一个解决兼容性问题的利器——小数 « 张鑫旭-鑫空间-鑫生活 搜狐白社会似iphone短信对话框效果的优化 « 张鑫旭-鑫空间-鑫生活 关于文字内容溢出用点点点(…)省略号表示 « 张鑫旭-鑫空间-鑫生活 jquery之append与insertBefore使用实例 « 张鑫旭-鑫空间-鑫生活 jQuery之图片关联伸缩效果 « 张鑫旭-鑫空间-鑫生活 jquery之图片左右切换动画效果 « 张鑫旭-鑫空间-鑫生活 jQuery之replace字符串替换实现不同尺寸图片切换 « 张鑫旭-鑫空间-鑫生活 jQuery-实现图片的放大镜显示效果 « 张鑫旭-鑫空间-鑫生活 jQuery-单击文字或图片内容放大显示效果插件 « 张鑫旭-鑫空间-鑫生活 reflection.js-实现图片投影倒影效果js插件 « 张鑫旭-鑫空间-鑫生活 jQuery-很酷的弹出层效果js插件 « 张鑫旭-鑫空间-鑫生活 复选框单选框与文字对齐问题的研究与解决 « 张鑫旭-鑫空间-鑫生活 css margin的相关属性,问题及应用 « 张鑫旭-鑫空间-鑫生活 IE6下png背景不透明问题的综合拓展 « 张鑫旭-鑫空间-鑫生活
英文单词朗读基于音素预估时长的JS算法 « 张鑫旭-鑫空间-鑫生活
张鑫旭,zhangxinxu · 2024-12-06 · via 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11473
本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。

音频波形封面占位图

本文属于工作技术实践经验分享。

一、先说下需求背景

目前TTS语音合成技术非常成熟,再配合一些静态图片,就能轻松合成一个MP4视频。

但有个问题,字幕。

为了节约成本,一个TTS语音包含的文字往往会有上百字,不可能全部一股脑作为字幕显示,需要进行分词,有一种简单的分词方法就是在逗号等标点位置进行分割。

如下图所示:

TTS语音分词

然后播放到对应时间,显示对应的字幕,就像下面这样:

分词与字幕

有的TTS语音供应商会返回每个分词的播放时间(见下图字段截图示意),例如字节的,这个就很方便,可以让我们精准控制语音和字幕的匹配时机。

分词时长占据示意

但有的TTS语音合成供应商只有一个总时长,没有分词时间,例如微软,这个就需要我们额外处理。

如果是中文还好,可以按照字数来处理,因为每个中文都会发音,最终的结果大差不差,用户通常无感知。

但是最近公司的海外平台也需要接入视频生成,用来投放引流,之前的算法就遇到了问题。

因为英文和中文不同,很多字母是不会发音的,或者连续几个字母只发一个音,此时,再根据字符数机械地处理,很容易会遇到视频发音和字幕不同步的问题。

英文分词字幕示意

所以,就需要额外的更精准的算法,在业界,称为“音素算法”。

二、音素算法与音频时长预估

开门见山,直接上JS代码:

// s 参数指英文单词
function getPhonemeCount(s) {
    let totalSyllables = 0;

    // qu to tq
    s = s.replace(/qu/g, 'qw');

    // replace endings
    s = s.replace(/(es$)|(que$)|(gue$)/g, '');

    s = s.replace(/^re/, 'ren');
    s = s.replace(/^gua/, 'ga');
    s = s.replace(/([aeiou])(l+e$)/g, '$1');
    let syllables = (s.match(/([bcdfghjklmnpqrstvwxyz])(l+e$)/g) || []).length;
    totalSyllables += syllables;
    s = s.replace(/([bcdfghjklmnpqrstvwxyz])(l+e$)/g, '$1');

    s = s.replace(/([aeiou])(ed$)/g, '$1');
    syllables = (s.match(/([bcdfghjklmnpqrstvwxyz])(ed$)/g) || []).length;
    totalSyllables += syllables;
    s = s.replace(/([bcdfghjklmnpqrstvwxyz])(ed$)/g, '$1');

    const endsp = /(ly$)|(ful$)|(ness$)|(ing$)|(est$)|(er$)|(ent$)|(ence$)/g;
    syllables = (s.match(endsp) || []).length;
    totalSyllables += syllables;
    s = s.replace(endsp, '');

    syllables = (s.match(endsp) || []).length;
    totalSyllables += syllables;
    s = s.replace(endsp, '');

    s = s.replace(/(^y)([aeiou][aeiou]*)/, '$2');
    s = s.replace(/([aeiou])(y)/g, '$1t');
    s = s.replace(/aa+/g, 'a');
    s = s.replace(/ee+/g, 'e');
    s = s.replace(/ii+/g, 'i');
    s = s.replace(/oo+/g, 'o');
    s = s.replace(/uu+/g, 'u');

    // Dipthongs
    const dipthongs = /(eau)|(iou)|(are)|(ai)|(au)|(ea)|(ei)|(eu)|(ie)|(io)|(oa)|(oe)|(oi)|(ou)|(ue)|(ui)/g;
    syllables = (s.match(dipthongs) || []).length;
    totalSyllables += syllables;
    s = s.replace(dipthongs, '');

    // Remove silent 'e' if length is greater than 3
    if (s.length > 3) {
        s = s.replace(/([bcdfghjklmnpqrstvwxyz])(e$)/g, '$1');
    }

    // Count vowels
    syllables = (s.match(/[aeiouy]/g) || []).length;
    totalSyllables += syllables;

    return totalSyllables;
}

这段代码参考后端同事那里的Python算法代码,我改成了JavaScript版本,所以,原出处是哪里,我也不清楚哈。

如何使用?

使用的时候非常简单,假设音频时长是ttsTime,文本内容是textContent,则下面的代码可以返回所有单词的音素总数:

function splitSentenceIntoWords(sentence) {
    return sentence.match(/\b\w+\b/g) || [];
}
// 计算音素数量
let allPhonemeCount = 0;
const words = splitSentenceIntoWords(textContent);
// 累加count
for (const word of words) {
    allPhonemeCount += getPhonemeCount(word);
}
// allPhonemeCount 就是音素总数

此时,每个单词占据的播放时长,就可以根据音素数量的比例进行精准分配了。

有对应的演示页面,您可以狠狠地点击这里:英文语音基于音素估算字幕时间demo

点击音频播放按钮,可以感受下声音和最下面的字幕是否同步。

播放与字幕时长控制

完整交互代码可以参见demo页面的源代码。

三、结语和其他些说明

上面的音素算法只能说比单纯基于字符数量预估分词时长更精准些,但也不是那种完美的精准。

最好的办法其实还是找一家可以返回每个单词朗读占据时长的供应商。

其他就没什么值得说的了吧。

希望本文的内容可以帮助到遇到此需求的小伙伴吧。

虽然场景小众,但是网上相关资料并不多。

从这一点看,本文的内容还是比较优质的。

所以,请举起你的小手,点击。

👍👍👍👍

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=11473

(本篇完)