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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2814 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

Vue

浊音

音图

沪江

18 条回复 • 2017-03-27 15:21:19 +08:00

texange

2017-03-22 07:00:10 +08:00

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

Weny

2017-03-22 07:24:34 +08:00 via Android

すごい！

Vicia

2017-03-22 07:38:18 +08:00 via iPhone

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

kindjeff

2017-03-22 09:33:05 +08:00 via iPhone

谷歌娘啊……

lancelot

2017-03-22 09:34:29 +08:00

干的不错，现在正需要。

minamike

2017-03-22 09:55:38 +08:00

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

yiyizym

2017-03-22 10:23:50 +08:00

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

https://judes.me/gojuon/

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

shetz163

2017-03-22 17:22:20 +08:00

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

yiyizym

2017-03-22 18:38:41 +08:00

@shetz163

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

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

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

shetz163

2017-03-22 19:58:59 +08:00

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

yiyizym

2017-03-23 10:22:13 +08:00

@shetz163

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

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

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

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

shetz163

2017-03-23 17:26:49 +08:00

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

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

yiyizym

2017-03-23 18:05:08 +08:00

@shetz163

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

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

shetz163

2017-03-23 18:41:05 +08:00

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

nthhdy

2017-03-25 17:04:17 +08:00

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

lrh3321

2017-03-26 14:55:54 +08:00

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

shetz163

2017-03-26 19:15:17 +08:00

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

gipsymoth

2017-03-27 15:21:19 +08:00

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