TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

I made a talking emoji using regular emojis and JavaScript

112 pointsby maury91over 7 years ago

9 comments

_nalplyover 7 years ago
I&#x27;m Deaf and read lips.<p>Thanks for this extremely intriguing idea to use emoji to depict a talking person visually.<p>You know, some animated films get it right. Sometimes I clearly see utterances like «Thank you!», «Okay», but more often not. Especially older animations don&#x27;t care and just let the character move the mouth in very simplistic ways: «Babbabbabaa Baababba ba baaa.»<p>Similarly for that emoji. It is moving the mouth in quite arbitrary ways. It looks like: «Sobbabbabee be &lt;grin&gt; seebee &lt;grin&gt; &lt;frown&gt; babbaa».<p>To solve this problem we need about twelve emoji for utterances: «ah», «ay», «ee», «oh», «oo», «b», «d», «f», «l», «n», «r» and «s». The «r» emoji must be animated (so we see the trilling tongue). The other sounds are either invisible like «k» or cover several different sounds like «b» also covering «m» and «p».<p>«Okay» would be rendered by: «oh», «oo», «oo» (standing for «k» wich is invisible) «ay» and «ee».<p>Edit: Add «th». This is an extremely simple sound to lipread. I remember my delight when I learnt English in my youth and in an movie suddenly realised that an actor said «Thank you».
评论 #16007791 未加载
评论 #16007994 未加载
评论 #16012129 未加载
评论 #16008139 未加载
评论 #16007973 未加载
评论 #16010685 未加载
exogenover 7 years ago
One improvement might be to use a pronunciation dictionary and map the emojis to actual sounds rather than characters. Having recently needed such a thing, I found that there are two widely available datasets: CMUdict and Moby Pronunciator:<p><a href="http:&#x2F;&#x2F;onlinebooks.library.upenn.edu&#x2F;webbin&#x2F;gutbook&#x2F;lookup?num=3205" rel="nofollow">http:&#x2F;&#x2F;onlinebooks.library.upenn.edu&#x2F;webbin&#x2F;gutbook&#x2F;lookup?n...</a><p><a href="https:&#x2F;&#x2F;github.com&#x2F;cmusphinx&#x2F;cmudict" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;cmusphinx&#x2F;cmudict</a><p>The problem is that they&#x27;d be pretty hefty payloads to load on the client, so you&#x27;d want to do the text -&gt; phone mapping elsewhere. Then use your character mapping as backup for words that aren&#x27;t in the dictionaries.
chrismorganover 7 years ago
&gt; an emoji, in reality, looks like this: “\xF0\x9F\x98\x81”<p>… well, that’s one encoding of the UTF-8 encoding of the Unicode code point.<p>&gt; This is because setInterval(_=&gt;{ },99) executes the function every 99ms<p>This is categorically wrong. You can’t trust setInterval to heed your request precisely at all: it’s a request that browsers take as a minimum only. Most browsers will call your function after the number of milliseconds you requested plus up to 16ms more, but some might wait even more than that (I think Safari in power saving mode doubles its tick time, to operate at 30fps; and background tabs typically won’t fire more than once a second these days).<p>Try running this snippet in your dev tools; it logs the number of milliseconds between calls:<p><pre><code> t=Date.now();setInterval(()=&gt;console.log(-t+(t=Date.now())), 99) </code></pre> On Firefox I’m getting mostly 108–111, with the odd one a little higher, and a couple of 99s after running it for a few minutes.<p>(Some trivia on similar techniques for this measurement: `+new Date` is rather slow, `Date.now()` is about 7× faster in at least Firefox and Chrome, and `performance.now()` gets you microsecond precision (it returns a floating-point number in milliseconds, tied to an unspecified epoch instead of real-world time), and is a little slower than Date.now().)
评论 #16068387 未加载
评论 #16009437 未加载
评论 #16008280 未加载
giancarlostoroover 7 years ago
Makes me think of Microsoft Comic Chat[0] this is kind of cool looking though, and definitely different.<p>[0]: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Microsoft_Comic_Chat" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Microsoft_Comic_Chat</a>
cornholioover 7 years ago
Good God, copy-pasting emoji in production code is now a thing. Damn you, millennials, damn you to code maintenance Hell!
评论 #16008029 未加载
评论 #16008285 未加载
评论 #16008439 未加载
DiThiover 7 years ago
&gt; Instead iterating through every byte like &quot;&quot;[n]<p>Pedantic note: JS iterates through UTF-16 2-byte code units. It&#x27;s that way for compatibility reasons (used to be UCS-2), but it&#x27;s the worst of both worlds: not as good as UTF-8 for ASCII, can&#x27;t do operations in O(1) time like UTF-32.
评论 #16008209 未加载
评论 #16008113 未加载
iverjoover 7 years ago
This idea originated in the jsgolf community and dwitter (a site where you post 140 character js snippets that generate interesting visuals). See <a href="https:&#x2F;&#x2F;www.dwitter.net&#x2F;u&#x2F;aemkei" rel="nofollow">https:&#x2F;&#x2F;www.dwitter.net&#x2F;u&#x2F;aemkei</a>
gdiocarezover 7 years ago
This is an interesting take on making javascript do animations.
bathtubover 7 years ago
Such a nice idea paired with a descriptive and non-click-baity title.