新概念英语第一册 - 带复读机按钮

zhangchaont

2 {5 C( a9 o0 Q0 r2 C, W* a- {
9 }# @) H" S& E  C1 o3 [, C) H( W  b为了给孩子学习英语，我把单词做成了卡片放在Anki里，但是课文却一直没有什么好的方法，在电脑上用一个复读机软件给孩子们练习，但是Mac上没有什么好用的复读机软件，所以学来学去还在最开始的几课里面打转。我本来想自己写一个复读机APP的，但是考虑到水平有限，估计得花很多时间，而且最大的问题不能利用Anki里schedule安排学习。

春节在家，我突然灵光一闪，Anki是基于PyQt5开发，而这个模块是支持一部分html、css和javascript的，如果用javascript读取字幕里面的时间戳，然后根据时间段来播放MP3，不就实现了一个简单的复读机了嘛。说干就干，因为没有javascript语言基础，都是需要什么就搜索，一步步的拼凑起来的，目前已经基本能用，成品在iOS上显示如下：
5 p& p" b/ B0 R* f! F. w- |5 R# h
; M: a3 u: D; L- jmacOS上的效果


js代码如下：

1. const lesson = document.getElementsByClassName("items")[0].innerText;
   
2. const button_next = document.createElement("button");
   3 Q* @  ]( q7 W; u" f
3. button_next.innerHTML = '下一句';
   + H0 R# q4 L3 r) x
4. button_next.setAttribute('row_count', "4");
   
5. let section = document.getElementsByClassName("section")[0];
   
6. 
   
7. const button_repeat = document.createElement("button");
   8 {' s4 \2 P. P# f" D! x
8. button_repeat.innerHTML = '重复此句';
   + j9 x- `+ [. w  m5 X# W6 v8 L
9. 
   5 z4 a( S; p* _  ?1 f% Z1 o" ~
10. const button_previous = document.createElement("button");
    1 d/ {1 F; d2 h# Y( X
11. button_previous.innerHTML = '上一句';
    
12. 
    
13. 
    / H$ s  E- T% |4 ^. R& f, B
14. let div = document.createElement('div');
    
15. div.setAttribute('class', 'text');
    
16. section.appendChild(div);
    . j7 p& x" J( S: Y$ }3 \4 s# Y0 Y
17. let p = document.createElement('p');
    
18. div.appendChild(p);
    1 z9 R! O8 P: e. W, _& |
19. 
    ; Z, M% O$ T/ s9 f! ]: B) n1 x
20. buttons_div = document.createElement('div');
    : ^  A2 A# }% D1 P
21. buttons_div.setAttribute('class', 'buttons');
    1 J9 S2 y  v5 y* B2 L3 P/ G5 ?. M/ b0 R% e
22. 
    5 P, f" y: R- ^4 G9 c3 O
23. section.appendChild(buttons_div);
    
24. 
    & O4 `* o0 b+ c# W5 s
25. buttons_div.appendChild(button_previous);
    
26. buttons_div.appendChild(button_repeat);
    
27. buttons_div.appendChild(button_next);
    4 E* F, P/ W5 V9 c' K
28. 
    
29. 
    
30. button_next.onclick = next;
    
31. button_repeat.onclick = repeat;
    
32. button_previous.onclick = previous;
    $ _9 p- S4 w* Q7 q
33. section.onload = play;
    
34. 
    
35. function next() {
    - h1 x$ _- y3 [6 y& h5 X
36.     let index = parseInt(button_next.getAttribute('row_count'));
    
37.     index += 1;
    : }( b0 o2 l. F& }9 \
38.     button_next.setAttribute('row_count', index.toString())
    ' o+ }# ]8 T/ q! n& W
39.     play().then(r => '');
    
40. }
    " |# {0 h% O$ R) T
41. 
    
42. function previous() {
    ' s8 J& V7 ]& y% Y. H3 V* ]7 s8 l
43.     let index = parseInt(button_next.getAttribute('row_count'));
    & U* v1 B  \8 g3 C
44.     index -= 1;
    
45.     button_next.setAttribute('row_count', index.toString())
    ( l9 @# v: t% k
46.     play().then(r => '');
    2 _* z& ]' s5 s# m2 |/ Y0 {
47. }
    $ `! q/ L9 Q" O* Z$ y2 \1 O6 H
48. 
    6 K7 D* R8 j. L: h# w
49. function repeat() {
    
50.     play().then(r => '');
    0 r, M4 \4 z, s. R+ u
51. }
    
52. 
    
53. async function play() {
    
54.     const file = "NCE1-" + lesson + ".lrc";
    : s1 I" G$ A) j3 A% z: U
55.     let myObject = await fetch(file);
    
56.     let myText = (await myObject.text()).trim();
    ) k7 P( E4 D: f3 u+ `! E+ t' p
57.     let lines = myText.split('\n');
    
58.     let index = parseInt(button_next.getAttribute('row_count'));
    
59. 
    % w  _% O, z7 m$ s& C, [
60.     if (index < 4) {
    ; a& L, a0 j% R9 k+ R# o; Q! @
61.         index = lines.length - 1;
    5 T2 X4 t. q3 q
62.         button_next.setAttribute('row_count', index.toString());
    
63.     }
    . q* L$ C( O" |& N
64.     if (index > lines.length - 1) {
    , I! j$ g4 C7 o9 L
65.         index = 4;
    
66.         button_next.setAttribute('row_count', index.toString());
    
67.     }
    3 ~( u. `2 w% W
68.     let current_line = lines[index];
    0 Y, l/ ?; @  V  i) e& M
69.     let text = current_line.slice(10, current_line.length - 1);
    ( D4 G; n/ g9 ~7 |: a& G0 H# a
70.     p.innerText = text;
    
71.     if (index < (lines.length - 1)) {
    5 Y# b% t: a' d
72.         let next_index = index + 1;
    
73.         let next_line = lines[next_index];
    ) b7 a; Q8 m2 |$ o+ _  g
74.         let current_time = current_line.slice(1, 9);
    0 q0 \9 e* i! ]( `
75.         let current_time_min_sec = current_time.split(':');
    
76.         let start = parseFloat(current_time_min_sec[0]) * 60 + parseFloat(current_time_min_sec[1]);
    
77.         let next_time = next_line.slice(1, 9);
    
78.         let next_time_min_sec = next_time.split(':');
    
79.         let end = parseFloat(next_time_min_sec[0]) * 60 + parseFloat(next_time_min_sec[1]) - 0.25;
    8 d# |, U& {# F8 s* b: o
80.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start + "," + end);
    % A" V# c- l& O( G* S! }) s8 Z0 B! s
81.         const play1 = audio.play();
    
82.     } else {
    $ b& U& q7 v" X1 z& D9 A1 [% k
83.         let current_time = current_line.slice(1, 9);
    
84.         let current_time_min_sec = current_time.split(':');
    ' y3 }- L% _$ U: r" e# V& T
85.         let start = parseFloat(current_time_min_sec[0]) * 60 + parseFloat(current_time_min_sec[1]);
    4 B! |/ L+ }& n, J! a
86.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start);
    
87.         const play2 = audio.play();
    
88.     }
    0 V( z8 {8 h5 _; q  W6 r
89. }

复制代码

3 {: L* v* u, l: z4 {8 L. ~& v. v2 T
: G6 \6 y6 R/ P使用的时候，把下面网盘链接里面的Anki卡片导入，然后把新概念的音频和字幕文件拷贝到Anki的collection.media文件夹里面，如果不知道media文件夹的位置在网上搜索一下。
; y  E, L& a  q0 F
2 N7 h5 }+ {% s& P2 @. `+ A% ~4 I

1. /*区块全局样式*/
   $ }7 [: c$ p" _0 [# o
2. .section {
   
3.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
   
4.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
   
5.   border-radius    : 3px;                /*圆角幅度-3px*/
   
6.   margin           : 8px 8px;              /*上下间隔-8px*/
   
7.         display                                                 : flex;
   
8.         flex-direction                 : column;
   
9.         height: 95vh;
   
10. }
    
11. 
    
12. /*区块全局样式*/
    1 w! o- p7 L: c# C) V
13. .mobile .section {
    + y) `" k0 o- ^, a- C" E* G* Q8 d
14.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
    " _. l' {- S, d; V7 B1 L; x
15.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
    
16.   border-radius    : 3px;                /*圆角幅度-3px*/
    7 s& f! s7 l2 O( U9 m/ o+ R
17.   margin           : 8px 8px;              /*上下间隔-8px*/
    & Q4 e# G8 |+ k$ Y& B; G" F" N
18.         display                                                 : flex;
    5 c% R# z7 u& b8 }
19.         flex-direction                 : column;
    
20.         height: 77vh;
    ! z! a* g& x0 }, U* \
21. }

复制代码

/ S% k& Z+ A+ g8 M3 s! M0 D+ k在模板里面的css部分，可以调节整个区块的大小，修改height后面的数值来调节。前面有.mobile的是对移动设备的设置。

; @! [0 @* F  n+ T1 z+ L你也可以把这个模板稍加修改就可以添加新概念后面的几本书。

1 k4 i) j/ n. V6 l

游客，如果您要查看本帖隐藏内容请回复

( ~6 X: q  q" \* i$ U
# ?9 R! [5 x5 h! C( P注意，因为iOS版本的Anki不会自动重新加载js，所以到第二张卡片的时候就会按钮显示不出来，退到deck界面再进去就可以了。

zhangchaont

yensen2006 发表于 2021-7-20 20:44
多谢多享！有没有第二册？

第二册的资源我应该有的，等我空了我找找做一下。

xingqiji

HAVE  A   LOOK,THX

fjfzjmok

HAVE  A   LOOK,THX
: U' S) U% ~0 ]8 N

jonah_w

学习一下

RickVincent

Thanks for sharing...

dayeeren

下来看看学习- W

loveaffairs

感谢分享

Gyngreenlie

这个牛。感谢楼主。

yangdavid2

多谢分享好资源！

drongh

好东西。谢谢。

cyvZgW

谢谢分享

shuwushimang

感谢分享

13841910239

学习新概念的人可以好好利用这个资料。

Tp01

谢谢分享

竹子精

楼主厉害了

誓吾爱

感谢分享

han2019

thanks a lot

CyQguoqj

感谢楼主~

winmemo

感谢分享。

hfwhzjy

thanks a lot

saic99

谢谢分享。

THGT

感谢楼主分享

2001821

非常的不错

Jiangxi

挺好，有创意，一切为了孩子。好父母

duq

多谢分享好资源！

yensen2006

多谢多享！有没有第二册？

friends

感谢分享，学习下