用 VUE.JS 做了一个学五十音图的网页

[shetz163]

网址： https://shetz163.github.io/gojuonzu/gojuonzu.html

最近在找个前端的工作，就自学了 vue.js 做了一个五十音学习和测验的网页，十分的简陋，有没有会 vue.js 的前辈指教一下实现 一键插入 /删除浊音 的方法啊。
为了实现发音偷偷的用了沪江的音频和百度翻译 TTS 的语音，如果不妥的话，求一份可以播放的五十音音频。


最后求一份在上海的前端工作或者实习，谢谢。

[texange]

在页面
testhiraganavoice.html
testkatakanavoice.html
不能跳回首页
gojuonzu.html

[Weny]

すごい！

[Vicia]

只需要五十音的音频的话，我可以录一份给楼主。

[kindjeff]

谷歌娘啊……

[lancelot]

干的不错，现在正需要。

[minamike]

测试时有时候会有重复选项 = =

[yiyizym]

好巧，好久之前，我也用 vuejs 做了一个 练习五十音的页面，那时还是 1.X 版本的 vue

https://judes.me/gojuon/

只要点任意一个字母，练习就会开始。。。

[shetz163]

@texange #1 忘了把链接加上了.....
@Vicia #3 不是录的音频...只是找不到单独的音频文件
@kindjeff #4 之前找到的 google tts 的接口无法使用 不知道是不是我使用方式不对
@minamike #6 之前就发现有这个问题....... 但是我已经把选项给推出去才做的随机出下一项选项的
@yiyizym #7 啊......看到你的我感觉我这个版本可以扔了.......... 想问问这个音频是怎么做的啊.....我只能用每个单独的音频....整合在一起的该怎么用嘞.......

[yiyizym]

@shetz163

我觉得你的比我的好多了。

我那个东西的源码和音频在这里 https://github.com/yiyizym/gojuon

音频是我自己用工具处理过，让每个发音都在特定时间点上，然后用 audio API 定位时间点。

[shetz163]

@yiyizym #9 太好了 看了源码我突然领悟了该怎么做正确错误的视觉特效了 谢谢啊~
还有个基础点的问题 我在做选项的时候 随机了一个选项之后就把它 splice 再做下一个 但是最后还是会有重复的选项
而且重复的一直都是正确的答案 我开始的时候就把它给 splice 的啊

[yiyizym]

@shetz163

我稍为看了一下你的代码，这个文件： testhiragana.html

四个选项中的答案出自 testkanas
而其它选项出自 kanaboxs

两个数组是独立的，当然有可能重复


PS. 你代码重复的地方不少，有时间的话，可以重构一下，可以拿出去当简历。。。

[shetz163]

@yiyizym #11 testkanas 是用来取剩余的多少个假名的 kanaboxs 是用来取选项的 我把答案取出来之后 两个数组里的都给 splice 了 然后才做的取下一个选项 所以很困惑为什么把 kanaboxs 里正确答案给 splice 了 最后呈现的效果却还是有重复的

当时写的时候就只管怎么样去把我想法实现出来 现在来看的确感觉太多代码重复的了 取选项什么的都可以单独做成一个方法然后再用

[yiyizym]

@shetz163

在第 303 行，你对 kanaboxs 重新赋值了；

或者说你找到问题的原因了？

[shetz163]

@yiyizym #13 在最后进行的赋值是为了确保下一轮随机出现的值是全部假名的 不然一轮 splice 四个 下一轮就不会随机到这四个值了 过不了几轮就没有值可以用了
感觉问题的原因是 这几项的赋值与 splice 是同时执行的 于是在选项还未在 kanaboxs 里被 splice 之时就已经完成了所有的选值

[nthhdy]

测试时,有时会出现有两个正确答案,比如前两个按钮都是"yo"
我选了第二个,结果第一个才是正确的.

[lrh3321]

同上，“片假名听音测试” 有时候会出现相同的假名

[shetz163]

@minamike #6
@yiyizym #13
@nthhdy #15
@lrh3321 #16
搞定了那个正确答案重复的问题了，犯了逻辑性的问题。。。好丢脸啊。。。。。

[gipsymoth]

楼主一级棒啊。正要学这个呢