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

zhangchaont

- w3 E1 \1 Y8 h' _& u" K' e
$ x0 E% @; T- E. w为了给孩子学习英语，我把单词做成了卡片放在Anki里，但是课文却一直没有什么好的方法，在电脑上用一个复读机软件给孩子们练习，但是Mac上没有什么好用的复读机软件，所以学来学去还在最开始的几课里面打转。我本来想自己写一个复读机APP的，但是考虑到水平有限，估计得花很多时间，而且最大的问题不能利用Anki里schedule安排学习。

( E: K0 }/ S9 k/ O春节在家，我突然灵光一闪，Anki是基于PyQt5开发，而这个模块是支持一部分html、css和javascript的，如果用javascript读取字幕里面的时间戳，然后根据时间段来播放MP3，不就实现了一个简单的复读机了嘛。说干就干，因为没有javascript语言基础，都是需要什么就搜索，一步步的拼凑起来的，目前已经基本能用，成品在iOS上显示如下：

macOS上的效果


4 y$ m9 B# C5 N& V. Bjs代码如下：
' z  [) v0 J2 n" S7 h

1. const lesson = document.getElementsByClassName("items")[0].innerText;
   % O3 v+ L$ F+ J/ w: ?- O8 ]
2. const button_next = document.createElement("button");
   
3. button_next.innerHTML = '下一句';
   6 v9 ?) M* k# n! R: g; f
4. button_next.setAttribute('row_count', "4");
   
5. let section = document.getElementsByClassName("section")[0];
   
6. 
   + a) c- [4 ]" u. A- I9 v9 _* ^
7. const button_repeat = document.createElement("button");
   
8. button_repeat.innerHTML = '重复此句';
   
9. 
   
10. const button_previous = document.createElement("button");
    ( L3 Q0 s2 a6 \( b/ M
11. button_previous.innerHTML = '上一句';
    
12. 
    $ P+ ?$ {9 z& x
13. 
    
14. let div = document.createElement('div');
    9 P5 L7 P* r3 @& }& ]) ^% ~+ B7 T
15. div.setAttribute('class', 'text');
    4 V6 |+ Y5 @8 S' g! [6 ~
16. section.appendChild(div);
    
17. let p = document.createElement('p');
    # ]' Z# n$ N5 t/ D0 o
18. div.appendChild(p);
    ) G5 {- ^  j  j9 t" w* g) i/ h) H5 V7 Y
19. 
    + V& o" W' F: H: ~2 P
20. buttons_div = document.createElement('div');
    
21. buttons_div.setAttribute('class', 'buttons');
    
22. 
    
23. section.appendChild(buttons_div);
    
24. 
    
25. buttons_div.appendChild(button_previous);
    
26. buttons_div.appendChild(button_repeat);
    6 E8 f* L7 a0 d( T" S
27. buttons_div.appendChild(button_next);
    
28. 
    5 \9 w* E4 |) l' P9 q6 r
29. 
    0 i. e4 G7 b- q4 ]4 d
30. button_next.onclick = next;
    : [7 S1 T1 H$ i8 k. u0 j
31. button_repeat.onclick = repeat;
    . q9 c$ s# S! I4 g) i) _( ?7 e
32. button_previous.onclick = previous;
    
33. section.onload = play;
    
34. 
    
35. function next() {
    " y) b; k" V6 H, |1 u  t
36.     let index = parseInt(button_next.getAttribute('row_count'));
    
37.     index += 1;
    
38.     button_next.setAttribute('row_count', index.toString())
    , Q6 k5 X! ]% V* ^; p
39.     play().then(r => '');
    
40. }
    
41. 
    + d& l" G" ~; Z! z
42. function previous() {
    
43.     let index = parseInt(button_next.getAttribute('row_count'));
    
44.     index -= 1;
    
45.     button_next.setAttribute('row_count', index.toString())
    
46.     play().then(r => '');
    
47. }
    . S. A) V8 `: I) R2 g* O& L) H
48. 
    7 J0 t' a5 B) H/ X9 M8 d
49. function repeat() {
    
50.     play().then(r => '');
    7 N! h/ X$ d* z7 f! B
51. }
    2 O5 v! T. p: ~* R
52. 
    
53. async function play() {
    
54.     const file = "NCE1-" + lesson + ".lrc";
    1 Y" V( I5 x  l+ }
55.     let myObject = await fetch(file);
    5 A5 B* S5 Y1 b7 m7 _  z0 F
56.     let myText = (await myObject.text()).trim();
    
57.     let lines = myText.split('\n');
    
58.     let index = parseInt(button_next.getAttribute('row_count'));
    
59. 
    ( Z4 g& X0 F: P. W; W
60.     if (index < 4) {
      d3 Z: V  v1 T5 X
61.         index = lines.length - 1;
    " ?% d; x# F/ e0 J" [4 V+ O
62.         button_next.setAttribute('row_count', index.toString());
    ' m/ k0 r4 ?; M5 z0 z
63.     }
    . a# ]- K2 i$ T+ Q8 f+ w7 f
64.     if (index > lines.length - 1) {
    , O5 T5 p# j) p! t* V6 m9 n2 W
65.         index = 4;
    
66.         button_next.setAttribute('row_count', index.toString());
    ) R0 b% z6 |5 a2 u2 U
67.     }
    
68.     let current_line = lines[index];
    # a3 `0 d) S+ {3 L; L
69.     let text = current_line.slice(10, current_line.length - 1);
      E! d6 A2 C4 ]0 J( r$ t
70.     p.innerText = text;
    0 p3 \9 M2 E6 p; i
71.     if (index < (lines.length - 1)) {
    
72.         let next_index = index + 1;
    
73.         let next_line = lines[next_index];
    * B/ t6 ?0 T& P6 Q; ]) {
74.         let current_time = current_line.slice(1, 9);
    
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]);
    3 W& r% z" e$ S( e+ i5 ]
77.         let next_time = next_line.slice(1, 9);
    : r6 j* R9 ~+ l* A6 \& d9 _! u4 a6 r
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;
    
80.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start + "," + end);
    
81.         const play1 = audio.play();
    : U$ u& @+ h4 A( v
82.     } else {
    
83.         let current_time = current_line.slice(1, 9);
    4 ]9 L; w- ^+ \
84.         let current_time_min_sec = current_time.split(':');
    
85.         let start = parseFloat(current_time_min_sec[0]) * 60 + parseFloat(current_time_min_sec[1]);
    
86.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start);
    6 d, }1 x6 L1 E; M7 q1 R
87.         const play2 = audio.play();
    
88.     }
    
89. }

复制代码

* G$ c$ E. g: j, u
- c$ H: u. h  u使用的时候，把下面网盘链接里面的Anki卡片导入，然后把新概念的音频和字幕文件拷贝到Anki的collection.media文件夹里面，如果不知道media文件夹的位置在网上搜索一下。

1. /*区块全局样式*/
   % [- L8 q0 s' f# x
2. .section {
   * J9 T! D% J" G/ z0 _
3.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
   
4.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
   
5.   border-radius    : 3px;                /*圆角幅度-3px*/
   % Y8 A  F: y0 L7 c6 y* H) Y
6.   margin           : 8px 8px;              /*上下间隔-8px*/
   4 K6 {* s/ ?7 ]$ c) c/ r) N* T
7.         display                                                 : flex;
   - T/ p0 n9 E+ e4 t+ _8 S3 U) ^
8.         flex-direction                 : column;
   
9.         height: 95vh;
   
10. }
    1 e& @3 r5 K  X3 {) n' ?+ o  u
11. 
    9 F# [! m2 _! O! C- j$ S- m& ^
12. /*区块全局样式*/
    
13. .mobile .section {
    " U. g7 m1 n3 W
14.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
    ! T3 h7 Q& ?; A' j4 ]& I7 a9 w1 S
15.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
    
16.   border-radius    : 3px;                /*圆角幅度-3px*/
    " L5 e' t0 Q4 i1 K5 D! J
17.   margin           : 8px 8px;              /*上下间隔-8px*/
    
18.         display                                                 : flex;
    
19.         flex-direction                 : column;
    * f+ q/ p$ W. v$ c8 }9 Y" n- U. f2 ^
20.         height: 77vh;
      {7 W' n/ H4 c- J0 F
21. }

复制代码

& M, B# Z. m7 O6 x在模板里面的css部分，可以调节整个区块的大小，修改height后面的数值来调节。前面有.mobile的是对移动设备的设置。

你也可以把这个模板稍加修改就可以添加新概念后面的几本书。
& H7 z5 n& y% G  ^8 r4 u

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

2 B6 y5 o0 H! c+ }" K4 ~6 I注意，因为iOS版本的Anki不会自动重新加载js，所以到第二张卡片的时候就会按钮显示不出来，退到deck界面再进去就可以了。

码农爱学习

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

5 F: d" m- ^1 H+ \9 |5 `+ w/ _【用Anki学唱英文歌，小段小段的练习，已经成功搞定几十首了】 https://www.bilibili.com/video/B ... 14ed81161268aaee250

zhangchaont

yensen2006 发表于 2021-7-20 20:44
# N) `4 r8 h; K* i多谢多享！有没有第二册？

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

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

感谢分享，学习下