爱意满满的作品展示区。
shetz163

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

  •  
  •   shetz163 · Mar 22, 2017 · 4660 views
    This topic created in 3347 days ago, the information mentioned may be changed or developed.
    网址: https://shetz163.github.io/gojuonzu/gojuonzu.html

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


    最后求一份在上海的前端工作或者实习,谢谢。
    18 replies    2017-03-27 15:21:19 +08:00
    texange
        1
    texange  
       Mar 22, 2017
    在页面
    testhiraganavoice.html
    testkatakanavoice.html
    不能跳回首页
    gojuonzu.html
    Weny
        2
    Weny  
       Mar 22, 2017 via Android
    すごい!
    Vicia
        3
    Vicia  
       Mar 22, 2017 via iPhone
    只需要五十音的音频的话,我可以录一份给楼主。
    kindjeff
        4
    kindjeff  
       Mar 22, 2017 via iPhone
    谷歌娘啊……
    lancelot
        5
    lancelot  
       Mar 22, 2017
    干的不错,现在正需要。
    minamike
        6
    minamike  
       Mar 22, 2017
    测试时有时候会有重复选项 = =
    yiyizym
        7
    yiyizym  
       Mar 22, 2017
    好巧,好久之前,我也用 vuejs 做了一个 练习五十音的页面,那时还是 1.X 版本的 vue

    https://judes.me/gojuon/

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

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

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

    音频是我自己用工具处理过,让每个发音都在特定时间点上,然后用 audio API 定位时间点。
    shetz163
        10
    shetz163  
    OP
       Mar 22, 2017
    @yiyizym #9 太好了 看了源码我突然领悟了该怎么做正确错误的视觉特效了 谢谢啊~
    还有个基础点的问题 我在做选项的时候 随机了一个选项之后就把它 splice 再做下一个 但是最后还是会有重复的选项
    而且重复的一直都是正确的答案 我开始的时候就把它给 splice 的啊
    yiyizym
        11
    yiyizym  
       Mar 23, 2017
    @shetz163

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

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

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


    PS. 你代码重复的地方不少,有时间的话,可以重构一下,可以拿出去当简历。。。
    shetz163
        12
    shetz163  
    OP
       Mar 23, 2017
    @yiyizym #11 testkanas 是用来取剩余的多少个假名的 kanaboxs 是用来取选项的 我把答案取出来之后 两个数组里的都给 splice 了 然后才做的取下一个选项 所以很困惑为什么把 kanaboxs 里正确答案给 splice 了 最后呈现的效果却还是有重复的

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

    在第 303 行,你对 kanaboxs 重新赋值了;

    或者说你找到问题的原因了?
    shetz163
        14
    shetz163  
    OP
       Mar 23, 2017
    @yiyizym #13 在最后进行的赋值是为了确保下一轮随机出现的值是全部假名的 不然一轮 splice 四个 下一轮就不会随机到这四个值了 过不了几轮就没有值可以用了
    感觉问题的原因是 这几项的赋值与 splice 是同时执行的 于是在选项还未在 kanaboxs 里被 splice 之时就已经完成了所有的选值
    nthhdy
        15
    nthhdy  
       Mar 25, 2017
    测试时,有时会出现有两个正确答案,比如前两个按钮都是"yo"
    我选了第二个,结果第一个才是正确的.
    lrh3321
        16
    lrh3321  
       Mar 26, 2017
    同上,“片假名听音测试” 有时候会出现相同的假名
    shetz163
        17
    shetz163  
    OP
       Mar 26, 2017
    @minamike #6
    @yiyizym #13
    @nthhdy #15
    @lrh3321 #16
    搞定了那个正确答案重复的问题了,犯了逻辑性的问题。。。好丢脸啊。。。。。
    gipsymoth
        18
    gipsymoth  
       Mar 27, 2017
    楼主一级棒啊。正要学这个呢
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5293 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 49ms · UTC 07:45 · PVG 15:45 · LAX 00:45 · JFK 03:45
    ♥ Do have faith in what you're doing.