├── CNAME
├── server.sh
├── .gitignore
├── css
├── kor.css
├── global.css
└── common.css
├── BaiduPlay.apkg
├── img
├── button
│ ├── de.png
│ ├── en.png
│ ├── jp.png
│ ├── pt.png
│ ├── ru.png
│ ├── th.png
│ ├── ara.png
│ ├── cte.png
│ ├── fra.png
│ ├── kor.png
│ ├── spa.png
│ └── template.psd
├── transition.gif
├── transition.jpg
└── transition.psd
├── docs
├── img
│ ├── jp-en.png
│ ├── 20170115144808.png
│ ├── 20170115144853.png
│ ├── 20170115145007.png
│ ├── 20170115145049.png
│ ├── 20170115145105.png
│ ├── 20170115145130.png
│ ├── 20170115152035.png
│ ├── 20170115153547.png
│ ├── 20170115153735.png
│ └── 20170115153809.png
└── 百度翻译语音接口.txt
├── js
├── playAudio.js
├── onload.js
├── controller.js
├── config.js
└── main.js
├── LICENSE
├── README.md
└── demo
├── de.html
├── en.html
├── jp.html
├── pt.html
├── ru.html
├── th.html
├── ara.html
├── cte.html
├── fra.html
├── kor.html
└── spa.html
/CNAME:
--------------------------------------------------------------------------------
1 | anki-theme-baiduplay.nocode.site
--------------------------------------------------------------------------------
/server.sh:
--------------------------------------------------------------------------------
1 | python -m SimpleHTTPServer 666
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.tmp
2 | *.code-workspace
3 | .DS_Store
--------------------------------------------------------------------------------
/css/kor.css:
--------------------------------------------------------------------------------
1 | .card{
2 | font-family:Malgun Gothic;
3 | }
--------------------------------------------------------------------------------
/BaiduPlay.apkg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/BaiduPlay.apkg
--------------------------------------------------------------------------------
/img/button/de.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/de.png
--------------------------------------------------------------------------------
/img/button/en.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/en.png
--------------------------------------------------------------------------------
/img/button/jp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/jp.png
--------------------------------------------------------------------------------
/img/button/pt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/pt.png
--------------------------------------------------------------------------------
/img/button/ru.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/ru.png
--------------------------------------------------------------------------------
/img/button/th.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/th.png
--------------------------------------------------------------------------------
/docs/img/jp-en.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/jp-en.png
--------------------------------------------------------------------------------
/img/button/ara.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/ara.png
--------------------------------------------------------------------------------
/img/button/cte.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/cte.png
--------------------------------------------------------------------------------
/img/button/fra.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/fra.png
--------------------------------------------------------------------------------
/img/button/kor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/kor.png
--------------------------------------------------------------------------------
/img/button/spa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/spa.png
--------------------------------------------------------------------------------
/img/transition.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/transition.gif
--------------------------------------------------------------------------------
/img/transition.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/transition.jpg
--------------------------------------------------------------------------------
/img/transition.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/transition.psd
--------------------------------------------------------------------------------
/img/button/template.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/img/button/template.psd
--------------------------------------------------------------------------------
/docs/img/20170115144808.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115144808.png
--------------------------------------------------------------------------------
/docs/img/20170115144853.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115144853.png
--------------------------------------------------------------------------------
/docs/img/20170115145007.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115145007.png
--------------------------------------------------------------------------------
/docs/img/20170115145049.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115145049.png
--------------------------------------------------------------------------------
/docs/img/20170115145105.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115145105.png
--------------------------------------------------------------------------------
/docs/img/20170115145130.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115145130.png
--------------------------------------------------------------------------------
/docs/img/20170115152035.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115152035.png
--------------------------------------------------------------------------------
/docs/img/20170115153547.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115153547.png
--------------------------------------------------------------------------------
/docs/img/20170115153735.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115153735.png
--------------------------------------------------------------------------------
/docs/img/20170115153809.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ecator/anki-theme-baiduplay/HEAD/docs/img/20170115153809.png
--------------------------------------------------------------------------------
/js/playAudio.js:
--------------------------------------------------------------------------------
1 | //播放音频函数，需要传入音频地址
2 | function playAudio(audioSrc) {
3 | // alert(audioSrc)
4 | //尝试获取语速
5 | var spd = document.getElementById('spd')
6 | // console.log(spd)
7 | spd = spd ? spd.value : '3'
8 | audioSrc += "&spd=" + spd
9 | var player = new Audio(audioSrc)
10 | player.play()
11 | }
--------------------------------------------------------------------------------
/css/global.css:
--------------------------------------------------------------------------------
1 | h1{
2 | text-align: center;
3 | }
4 | .container{
5 | border:0px solid blue;
6 | width: 80%;
7 | height: 500px;
8 | margin: 5px auto;
9 | }
10 | .content{
11 | border:0px solid red;
12 | width: 90%;
13 | height: 400px;
14 | margin: 5px auto;
15 | overflow: auto;
16 | }
17 | .controller{
18 | border:0px solid gray;
19 | width: 90%;
20 | height: 30px;
21 | margin: 5px auto;
22 | text-align: center;
23 | }
24 | .controller button{
25 | cursor: pointer;
26 | }
--------------------------------------------------------------------------------
/js/onload.js:
--------------------------------------------------------------------------------
1 | //页面加载完毕后加载本文件
2 | showFront()
3 | //自动填充标题和h1为模板名称
4 | var titleMap={
5 | "en":"BaiduPlay-en：英语",
6 | "jp":"BaiduPlay-jp：日语",
7 | "fra":"BaiduPlay-fra：法语",
8 | "kor":"BaiduPlay-kor：韩语",
9 | "de":"BaiduPlay-de：德语",
10 | "spa":"BaiduPlay-spa：西班牙语",
11 | "ara":"BaiduPlay-ara：阿拉伯语",
12 | "ru":"BaiduPlay-ru：俄语",
13 | "pt":"BaiduPlay-pt：葡萄牙语",
14 | "th":"BaiduPlay-th：泰语",
15 | "cte":"BaiduPlay-cte：粤语"
16 | }
17 | document.title=titleMap[language]
18 | document.getElementsByTagName("h1")[0].innerText=document.title
--------------------------------------------------------------------------------
/js/controller.js:
--------------------------------------------------------------------------------
1 | //显示卡片背面
2 | function showAns() {
3 | var content=document.getElementById("content")
4 | var controller=document.getElementById("controller")
5 | var tmp=config.tpl.back.replace(/{{word}}/g,words[wordIndex])
6 | tmp=tmp.replace(/{{phonetic}}/g,phonetics[wordIndex])
7 | content.innerHTML=tmp.replace(/{{trans}}/g,trans[wordIndex])
8 | controller.innerHTML=" "
9 | requestjs("../js/main.js")
10 | }
11 | //显示卡片正面
12 | function showFront(){
13 | var content=document.getElementById("content")
14 | var controller=document.getElementById("controller")
15 | content.innerHTML=config.tpl.front.replace(/{{word}}/g,words[wordIndex])
16 | controller.innerHTML=""
17 | requestjs("../js/main.js")
18 | }
19 | //显示下一个单词，数组循环
20 | function showNext(){
21 | wordIndex=wordIndex==words.length-1?0:wordIndex+1
22 | showFront()
23 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Martin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/百度翻译语音接口.txt:
--------------------------------------------------------------------------------
1 | 百度翻译语音接口
2 |
3 | 请求参数text=你好
4 |
5 | 阿拉伯语
6 | http://fanyi.baidu.com/gettts?lan=ara&text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&spd=3&source=web
7 |
8 | 德语
9 | http://fanyi.baidu.com/gettts?lan=de&text=Hallo&spd=3&source=web
10 |
11 | 俄语
12 | http://fanyi.baidu.com/gettts?lan=ru&text=%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82&spd=3&source=web
13 |
14 | 法语
15 | http://fanyi.baidu.com/gettts?lan=fra&text=Bonjour&spd=3&source=web
16 |
17 | 韩语
18 | http://fanyi.baidu.com/gettts?lan=kor&text=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94.&spd=3&source=web
19 |
20 | 葡萄牙语
21 | http://fanyi.baidu.com/gettts?lan=pt&text=Ol%C3%A1&spd=3&source=web
22 |
23 | 日语
24 | http://fanyi.baidu.com/gettts?lan=jp&text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF&spd=3&source=web
25 |
26 | 泰语
27 | http://fanyi.baidu.com/gettts?lan=th&text=%E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5&spd=3&source=web
28 |
29 | 西班牙语
30 | http://fanyi.baidu.com/gettts?lan=spa&text=%C2%A1Hola!&spd=3&source=web
31 |
32 | 英语
33 | http://fanyi.baidu.com/gettts?lan=en&text=Hello%2C&spd=3&source=web
34 |
35 | 粤语
36 | http://fanyi.baidu.com/gettts?lan=cte&text=%E4%BD%A0%E5%A5%BD&spd=3&source=web
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # BaiduPlay
2 |
3 | Anki百度风格在线发音模板，支持11种语言。
4 |
5 | > 本模板采用引入资源的写法，全程依赖网络，所有资源文件均托管在本仓库。
6 |
7 | [详细说明传送门](https://zhuanlan.zhihu.com/p/24888978)
8 |
9 | # 模板在线预览
10 |
11 | - [BaiduPlay-en：英语](https://ecator.github.io/anki-theme-baiduplay/demo/en.html)
12 | - [BaiduPlay-jp：日语](https://ecator.github.io/anki-theme-baiduplay/demo/jp.html)
13 | - [BaiduPlay-fra：法语](https://ecator.github.io/anki-theme-baiduplay/demo/fra.html)
14 | - [BaiduPlay-kor：韩语](https://ecator.github.io/anki-theme-baiduplay/demo/kor.html)
15 | - [BaiduPlay-de：德语](https://ecator.github.io/anki-theme-baiduplay/demo/de.html)
16 | - [BaiduPlay-spa：西班牙语](https://ecator.github.io/anki-theme-baiduplay/demo/spa.html)
17 | - [BaiduPlay-ara：阿拉伯语](https://ecator.github.io/anki-theme-baiduplay/demo/ara.html)
18 | - [BaiduPlay-ru：俄语](https://ecator.github.io/anki-theme-baiduplay/demo/ru.html)
19 | - [BaiduPlay-pt：葡萄牙语](https://ecator.github.io/anki-theme-baiduplay/demo/pt.html)
20 | - [BaiduPlay-th：泰语](https://ecator.github.io/anki-theme-baiduplay/demo/th.html)
21 | - [BaiduPlay-cte：粤语](https://ecator.github.io/anki-theme-baiduplay/demo/cte.html)
22 |
23 | # 本地调试
24 |
25 | 在本地运行`./server.sh`后可以在当前目录创建一个监听666端口的服务器
26 |
27 | > 需要安装Python
28 |
--------------------------------------------------------------------------------
/demo/de.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/en.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/jp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/pt.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/ru.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/th.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/ara.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/cte.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/fra.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/kor.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/demo/spa.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
31 |
32 |
33 |
34 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/js/config.js:
--------------------------------------------------------------------------------
1 | //加载一个包含单词以及模板的全局config对象
2 | //日语
3 | //资源根路径 http://ecator.github.io/anki-theme-hjbasic/
4 | var config={
5 | tpl:{
6 | front:"{{word}}
",
7 | back:"{{word}}
{{phonetic}}
![]()
{{trans}}
"
8 | },
9 | //语言设置
10 | //日语
11 | jp:{
12 | words:new Array("暗記","日本語","こんにちは"),
13 | phonetics:new Array("あんき","にほんご","こんにちは"),
14 | trans:new Array("背诵","日语","你好")
15 | },
16 | //德语
17 | de:{
18 | words:new Array("Deutsch","Hallo"),
19 | phonetics:new Array("",""),
20 | trans:new Array("德语","你好")
21 | },
22 | //英语
23 | en:{
24 | words:new Array("english","hello"),
25 | phonetics:new Array("ɪŋɡlɪʃ","hə'ləʊ"),
26 | trans:new Array("英语","你好")
27 | },
28 | //法语
29 | fra:{
30 | words:new Array("française","Bonjour"),
31 | phonetics:new Array("frɑ̃sɛ","bɔ̃ʒu:r"),
32 | trans:new Array("法语","你好")
33 | },
34 | //韩语
35 | kor:{
36 | words:new Array("한국어","오빠"),
37 | phonetics:new Array("",""),
38 | trans:new Array("韩语","你好")
39 | },
40 | //西班牙语
41 | spa:{
42 | words:new Array("España","testigo"),
43 | phonetics:new Array("",""),
44 | trans:new Array("西班牙语","你好")
45 | },
46 | //阿拉伯语
47 | ara:{
48 | words:new Array("عربي","مرحبا"),
49 | phonetics:new Array("",""),
50 | trans:new Array("阿拉伯语","你好")
51 | },
52 | //俄语
53 | ru:{
54 | words:new Array("русский","Привет"),
55 | phonetics:new Array("",""),
56 | trans:new Array("俄语","你好")
57 | },
58 | //葡萄牙语
59 | pt:{
60 | words:new Array("Português","Olá"),
61 | phonetics:new Array("",""),
62 | trans:new Array("葡萄牙语","你好")
63 | },
64 | //泰语
65 | th:{
66 | words:new Array("ภาษาไทย","สวัสดี"),
67 | phonetics:new Array("",""),
68 | trans:new Array("泰语","你好")
69 | },
70 | //粤语
71 | cte:{
72 | words:new Array("广东话","你好"),
73 | phonetics:new Array("",""),
74 | trans:new Array("粤语","你好")
75 | }
76 | }
--------------------------------------------------------------------------------
/css/common.css:
--------------------------------------------------------------------------------
1 | .card {
2 | font-family: arial;
3 | font-size: 20px;
4 | text-align: left;
5 | color: black;
6 | background-color: white;
7 | }
8 | /*背面过度动画*/
9 | .transition{
10 | background-image: url('../img/transition.gif');
11 | background-position: center;
12 | background-repeat: no-repeat;
13 | background-color: white;
14 | width: 100%;
15 | height: 100%;
16 | position: absolute;
17 | top: 0px;
18 | left: 0px;
19 | min-height: 300px;
20 | min-width: 300px;
21 | }
22 | .word{
23 | font-weight: bold;
24 | color:red;
25 | text-align:center;
26 | }
27 | .front{
28 | font-size:30px;
29 | margin: 50px auto;
30 | }
31 | .back{
32 | text-align:center;
33 | font-size:25px;
34 | color:black;
35 | }
36 | .phonetic{
37 | font-weight:bold;
38 | font-size:15px;
39 | color: gray;
40 | text-align:center;
41 | }
42 | .trans{
43 | line-height: 20px;
44 | background-color: blue;
45 | border: 1px solid #F0EFF0;
46 | border-radius:10px 4px;
47 | padding: 6px 6px 6px 13px;
48 | color: white;
49 | margin-top:15px;
50 | font-size:18px;
51 | }
52 |
53 | #spd{
54 | height:10px;
55 | cursor:pointer;
56 | }
57 | /*自动播放调节*/
58 | .adjuster *{
59 | cursor:pointer;
60 | }
61 | .adjuster label{
62 | font-size:12px;
63 | }
64 | .adjuster{
65 | text-align:center;
66 | }
67 | /*定义自动播放控制按钮样式*/
68 | .adjuster .noautoplay,.adjuster .autoplay{
69 | display: inline-block;
70 | border-radius: 15px;
71 | padding: 3px 6px;
72 | font-size: 12px;
73 | background-image: none;
74 | font-weight: normal;
75 | line-height: 1.42857143;
76 | margin-bottom: 0px;
77 | text-decoration: none;
78 | color: #fff;
79 | background-color: #5bc0de;
80 | border-color: #46b8da;
81 | border-width: 2px;
82 | }
83 | /*自动播放非激活状态*/
84 | .adjuster .noautoplay{
85 | border-style: outset;
86 | }
87 | /*自动播放激活状态*/
88 | .adjuster .autoplay{
89 | border-style: inset;
90 | background-color: #4cb0db;
91 | border-color: #43b5cb;
92 | }
93 | /*版本信息*/
94 | .version{
95 | text-align:center;
96 | font-size:10px;
97 | }
98 |
99 | /*移动端和PC端音频图标样式*/
100 | #playButton{
101 | display:none;
102 | width:35px;
103 | height:35px;
104 | margin:1px auto;
105 | }
106 | #playButton:hover{
107 | cursor:pointer;
108 | }
109 | #playButton:active{
110 | position:relative;
111 | top:2px;
112 | }
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | //入口模块
2 | //检测是否有版本更新
3 | var lastVersion='2.0.3'
4 | if (version!=lastVersion) {
5 | if(!document.querySelector(".version")){
6 | var div=document.createElement('div')
7 | div.setAttribute('class',"version")
8 | div.innerHTML="发现新版本"+lastVersion+"(当前版本"+version+")点我更新
修复PC端发音还需要安装插件1265623513"
9 | //div.innerHTML="发音功能失效，修复日待定。。。"
10 | document.body.appendChild(div)
11 | }
12 | }
13 | //加载js文件函数
14 | function loadjs(filename){
15 | var script=document.createElement("script")
16 | script.setAttribute("src",getjsBaseurl()+filename+'.js')
17 | document.head.appendChild(script)
18 | }
19 | //获取script自身baseurl
20 | function getjsBaseurl(){
21 | var script=document.getElementsByTagName("script")[document.getElementsByTagName("script").length-1]
22 | if(script.getAttribute("data-baseurl")){
23 | return script.getAttribute("data-baseurl")
24 |
25 | }else
26 | {
27 | var tmp=script.src.split('/')
28 | // console.log(tmp)
29 | tmp.pop()
30 | return tmp.join("/")+"/"
31 | }
32 | }
33 |
34 | //加载依赖模块
35 | loadjs("playAudio")
36 |
37 | //执行anki的初始化js代码
38 | function initialAnki(){
39 | if (typeof(playAudio)=='function' && typeof(baiduplay)=='object') {
40 | var playbtn=document.getElementById('playButton')
41 | if (!playbtn) {
42 | setTimeout(initialAnki,1000)
43 | }else{
44 | //当前卡片为背面，加载控件
45 | //先判断控件是否存在，防止重复加载
46 | if(document.querySelector('label[for=spd]')) return
47 | //加载音频按钮
48 | playbtn.setAttribute('src',getjsBaseurl()+'../img/button/'+language+'.png')
49 | var word=document.getElementById('word').innerText
50 | var audiourl="https://fanyi.baidu.com/gettts?lan="+language+"&text="+encodeURI(word)+"&source=web"
51 | playbtn.setAttribute('onclick',"playAudio(\""+audiourl+"\")")
52 | playbtn.style.display='block'
53 | //加载语速调节器
54 | var adjuster=document.querySelector(".adjuster")
55 | var labelSpd=document.createElement('label')
56 | labelSpd.setAttribute('for','spd')
57 | labelSpd.innerText='当前语速:'+baiduplay.spd
58 | var spd=document.createElement('input')
59 | spd.setAttribute('min',1)
60 | spd.setAttribute('max',7)
61 | spd.setAttribute('step',1)
62 | spd.setAttribute('type','range')
63 | spd.setAttribute('id','spd')
64 | spd.setAttribute('value',baiduplay.spd)
65 | spd.onchange=function(){
66 | document.querySelector('label[for=spd]').innerText="当前语速:"+this.value
67 | baiduplay.spd=this.value
68 | }
69 | adjuster.appendChild(labelSpd)
70 | adjuster.appendChild(spd)
71 | //加载自动播放选项按钮
72 | var AutoPlay=document.createElement('button')
73 | AutoPlay.setAttribute('class','noautoplay')
74 | AutoPlay.innerText="打开自动播放"
75 | AutoPlay.onclick=function(){
76 | if (this.innerText=='打开自动播放') {
77 | baiduplay.autoplay=true
78 | this.innerText='关闭自动播放'
79 | AutoPlay.setAttribute('class','autoplay')
80 | }else{
81 | baiduplay.autoplay=false
82 | this.innerText="打开自动播放"
83 | AutoPlay.setAttribute('class','noautoplay')
84 | }
85 | }
86 | adjuster.appendChild(AutoPlay)
87 | //所有组件加载完毕，隐藏过度div
88 | document.querySelector('.transition').style.display='none'
89 | //判断是否自动播放音频
90 | if (baiduplay.autoplay) {
91 | AutoPlay.innerText="关闭自动播放"
92 | AutoPlay.setAttribute('class','autoplay')
93 | playAudio(audiourl)
94 | }else{
95 | AutoPlay.innerText="打开自动播放"
96 | AutoPlay.setAttribute('class','noautoplay')
97 | }
98 | }
99 | }else{
100 | setTimeout(initialAnki,1000)
101 | }
102 | }
103 | //设置全局变量baiduplay用于卡片正反传值
104 | if (typeof(baiduplay)=="undefined") {
105 | var baiduplay={
106 | autoplay:false,
107 | spd:3
108 | }
109 | }
110 | setTimeout(initialAnki,1000)
--------------------------------------------------------------------------------