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

zhangchaont

为了给孩子学习英语，我把单词做成了卡片放在Anki里，但是课文却一直没有什么好的方法，在电脑上用一个复读机软件给孩子们练习，但是Mac上没有什么好用的复读机软件，所以学来学去还在最开始的几课里面打转。我本来想自己写一个复读机APP的，但是考虑到水平有限，估计得花很多时间，而且最大的问题不能利用Anki里schedule安排学习。
# C* M% i& K. S1 V/ y8 n
春节在家，我突然灵光一闪，Anki是基于PyQt5开发，而这个模块是支持一部分html、css和javascript的，如果用javascript读取字幕里面的时间戳，然后根据时间段来播放MP3，不就实现了一个简单的复读机了嘛。说干就干，因为没有javascript语言基础，都是需要什么就搜索，一步步的拼凑起来的，目前已经基本能用，成品在iOS上显示如下：

# ~$ T- m3 v$ M/ Q6 b# Y+ JmacOS上的效果


% s" l. C- [! ]" [! C+ s1 \% |js代码如下：
6 h6 L  P( e  H) R3 N" i

1. const lesson = document.getElementsByClassName("items")[0].innerText;
   
2. const button_next = document.createElement("button");
   / {6 Y) S7 D- a$ M! D
3. button_next.innerHTML = '下一句';
   
4. button_next.setAttribute('row_count', "4");
   3 h6 g8 O$ T7 t* B! |
5. let section = document.getElementsByClassName("section")[0];
   
6. 
   
7. const button_repeat = document.createElement("button");
   4 {3 l' W' H4 L7 k1 Y& d' \
8. button_repeat.innerHTML = '重复此句';
   
9. 
   % H; X& e& s, v+ ?
10. const button_previous = document.createElement("button");
    ! M. H) W) H5 @  ~' t! g9 g
11. button_previous.innerHTML = '上一句';
    & G( s$ K$ o# j- g. [4 h: m# d
12. 
    / e9 T' G; \) i' ^$ g- F
13. 
    
14. let div = document.createElement('div');
    - V; `3 [* i3 E7 Z  W' ]9 v# s
15. div.setAttribute('class', 'text');
    ! ^' h2 \) ?9 B' l& T) L. G. C* p
16. section.appendChild(div);
    
17. let p = document.createElement('p');
    % R8 ?, f$ V- ]( v+ ]2 x' d& Z
18. div.appendChild(p);
    " I" F- a; f% e# E+ Z8 U* N
19. 
    $ j& Q8 ^; T/ j# e! E7 R
20. buttons_div = document.createElement('div');
    1 d/ @4 T  f- X* h; R% d( C5 m
21. buttons_div.setAttribute('class', 'buttons');
    ' y0 O/ F" x) Z3 i# s
22. 
    
23. section.appendChild(buttons_div);
    
24. 
    & X4 D" \' p0 F  C
25. buttons_div.appendChild(button_previous);
    
26. buttons_div.appendChild(button_repeat);
    
27. buttons_div.appendChild(button_next);
    - p+ r1 ~# S5 {- K; q$ f$ b. [
28. 
    
29. 
      T! n7 {$ u" F! Z& c$ y! z
30. button_next.onclick = next;
    : |+ x$ @; S- h: a* X5 B: r1 Q- Q
31. button_repeat.onclick = repeat;
    2 t% y* [2 j% o; ]
32. button_previous.onclick = previous;
    
33. section.onload = play;
    
34. 
    
35. function next() {
    - Z: l; C4 ~% O
36.     let index = parseInt(button_next.getAttribute('row_count'));
      ~/ N2 Z+ B5 o
37.     index += 1;
    
38.     button_next.setAttribute('row_count', index.toString())
    8 r+ ?" c8 r; k9 i/ ^6 z
39.     play().then(r => '');
    7 @% I9 k/ x2 ]" ]: Y
40. }
    7 q- e4 C- Z& B0 h9 k
41. 
    , R5 ^' i$ P1 h
42. function previous() {
    
43.     let index = parseInt(button_next.getAttribute('row_count'));
    6 A5 m# b# ^3 k! @+ x% X1 N
44.     index -= 1;
    
45.     button_next.setAttribute('row_count', index.toString())
    5 A6 m2 L: }5 F3 e5 R
46.     play().then(r => '');
    ! `4 M/ b) V2 J" U% e/ t
47. }
    6 A: R+ O" U3 I# b! L/ u. y) f( }! s
48. 
    # O( \) h5 G/ i0 z. v4 t+ S) W9 p
49. function repeat() {
    " {9 S4 b# t* J7 `+ ?& c
50.     play().then(r => '');
    ; M  w2 q" M0 ?) _
51. }
    " Z3 j  [4 A( x
52. 
    3 A; P% k1 h" ?2 o1 q: V1 n7 l" D
53. async function play() {
    
54.     const file = "NCE1-" + lesson + ".lrc";
    ( I; c5 S6 W% `$ U& Z# a( Q
55.     let myObject = await fetch(file);
    
56.     let myText = (await myObject.text()).trim();
    : b( {0 v% ?) J9 @, K6 X; f
57.     let lines = myText.split('\n');
    
58.     let index = parseInt(button_next.getAttribute('row_count'));
    
59. 
    
60.     if (index < 4) {
    $ V4 i2 w5 W5 }2 Y/ D! g1 \
61.         index = lines.length - 1;
    ! S7 ^, R" J) M* n6 i( |5 y
62.         button_next.setAttribute('row_count', index.toString());
    * |8 {; \- m3 e4 J% U
63.     }
    8 F7 Z4 X  m1 k) `
64.     if (index > lines.length - 1) {
    : y9 L/ k8 ?" z! a1 t) B. V7 c% w
65.         index = 4;
    , f* R* z( @8 |- H% [4 i* y
66.         button_next.setAttribute('row_count', index.toString());
    
67.     }
    
68.     let current_line = lines[index];
    ! v0 j% z3 t9 ~' j
69.     let text = current_line.slice(10, current_line.length - 1);
    
70.     p.innerText = text;
    & m0 w' s; v: c' V1 i
71.     if (index < (lines.length - 1)) {
    4 W  u3 {% Z7 G2 }- z, ^0 c7 t1 P! v
72.         let next_index = index + 1;
    * \0 t$ `+ I5 ^' G/ }* m& h
73.         let next_line = lines[next_index];
    4 U: ~+ p, s+ ~8 x4 @+ l
74.         let current_time = current_line.slice(1, 9);
      ]% `0 Z0 e/ s; Q. G
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);
    8 k6 b5 P; j  J# M3 s5 G
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;
      @$ T- f  x  k( w: z$ A
80.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start + "," + end);
    2 F0 a8 T% m8 r/ Q$ m1 y! Y
81.         const play1 = audio.play();
    ' `4 v% X$ w8 s" [( b2 d
82.     } else {
    
83.         let current_time = current_line.slice(1, 9);
    
84.         let current_time_min_sec = current_time.split(':');
    " Y# Y/ Y' @/ h9 p; l: z
85.         let start = parseFloat(current_time_min_sec[0]) * 60 + parseFloat(current_time_min_sec[1]);
      f* y, y, W4 D
86.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start);
    8 h/ B0 A/ L" ], n7 q$ B
87.         const play2 = audio.play();
    2 _- Y) y: y- _
88.     }
    / p6 t; b  l' D  ^: s
89. }

复制代码

8 R9 R6 |- _  k" U7 @使用的时候，把下面网盘链接里面的Anki卡片导入，然后把新概念的音频和字幕文件拷贝到Anki的collection.media文件夹里面，如果不知道media文件夹的位置在网上搜索一下。
4 f" o: B' l, e- `- Z
* _' |4 K  @$ p4 v2 `- s

1. /*区块全局样式*/
   
2. .section {
   
3.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
   
4.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
   
5.   border-radius    : 3px;                /*圆角幅度-3px*/
   
6.   margin           : 8px 8px;              /*上下间隔-8px*/
   + Y$ o" i7 X" t. b" `0 x
7.         display                                                 : flex;
   
8.         flex-direction                 : column;
   0 z2 ?0 M, _1 P: m% d2 ?
9.         height: 95vh;
   
10. }
    
11. 
    
12. /*区块全局样式*/
    # @& ~' C) M  c9 n# Z5 y+ Y
13. .mobile .section {
    
14.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
    
15.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
    
16.   border-radius    : 3px;                /*圆角幅度-3px*/
    
17.   margin           : 8px 8px;              /*上下间隔-8px*/
    
18.         display                                                 : flex;
    & B: |, U2 R1 s
19.         flex-direction                 : column;
      \1 Q' i. [# i& ]# m
20.         height: 77vh;
    
21. }

复制代码

# h4 e& Q2 u: j2 s' B在模板里面的css部分，可以调节整个区块的大小，修改height后面的数值来调节。前面有.mobile的是对移动设备的设置。
9 |6 z; o& W% s, y
1 F$ r" i2 G" w2 k# c  x你也可以把这个模板稍加修改就可以添加新概念后面的几本书。

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

8 S8 V5 M) R# P1 A2 c
1 c- e* ~" p6 q2 o) i* |: a注意，因为iOS版本的Anki不会自动重新加载js，所以到第二张卡片的时候就会按钮显示不出来，退到deck界面再进去就可以了。

码农爱学习

这个思路跟我用来练习唱英文类似

【用Anki学唱英文歌，小段小段的练习，已经成功搞定几十首了】 https://www.bilibili.com/video/B ... 14ed81161268aaee250

zhangchaont

yensen2006 发表于 2021-7-20 20:44
. p, K9 c6 Y  O. G( R! g多谢多享！有没有第二册？

; M* q0 `# s$ W, |1 A第二册的资源我应该有的，等我空了我找找做一下。

xingqiji

HAVE  A   LOOK,THX

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

感谢分享，学习下