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

zhangchaont

# O& g. ~' T/ K2 M
) {/ ]7 v4 ^7 l- ]! s! b; G+ U8 m) @为了给孩子学习英语，我把单词做成了卡片放在Anki里，但是课文却一直没有什么好的方法，在电脑上用一个复读机软件给孩子们练习，但是Mac上没有什么好用的复读机软件，所以学来学去还在最开始的几课里面打转。我本来想自己写一个复读机APP的，但是考虑到水平有限，估计得花很多时间，而且最大的问题不能利用Anki里schedule安排学习。

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

/ a3 o( e0 R3 mmacOS上的效果

9 p$ |9 d4 L1 `
js代码如下：

1. const lesson = document.getElementsByClassName("items")[0].innerText;
   
2. const button_next = document.createElement("button");
   $ W+ \, ?# c, w6 i5 x) w
3. button_next.innerHTML = '下一句';
   
4. button_next.setAttribute('row_count', "4");
   1 I4 A' Z+ j# T, v3 Y
5. let section = document.getElementsByClassName("section")[0];
   $ Q0 O( T) P4 o& U, b5 t8 o
6. 
   
7. const button_repeat = document.createElement("button");
   
8. button_repeat.innerHTML = '重复此句';
   - a  I2 K0 M& C& U2 i  ^
9. 
   
10. const button_previous = document.createElement("button");
    
11. button_previous.innerHTML = '上一句';
    
12. 
    
13. 
    
14. let div = document.createElement('div');
    
15. div.setAttribute('class', 'text');
    ' R. |; Z2 i1 ^# }+ ~, o  E  p7 o
16. section.appendChild(div);
    
17. let p = document.createElement('p');
    
18. div.appendChild(p);
    0 l/ Y7 n+ L* [& Z/ C
19. 
    
20. buttons_div = document.createElement('div');
    ) m4 g% Q1 U: T  [5 O
21. buttons_div.setAttribute('class', 'buttons');
    6 M5 s7 A% Q& G4 U0 N
22. 
    
23. section.appendChild(buttons_div);
    
24. 
    
25. buttons_div.appendChild(button_previous);
    & q9 O0 K/ E$ j+ D
26. buttons_div.appendChild(button_repeat);
    
27. buttons_div.appendChild(button_next);
    
28. 
    1 O, n7 u3 q( _0 t7 B4 e8 K% S- r
29. 
    " r: B) l' U3 C/ [" ~: t4 ^; K
30. button_next.onclick = next;
    
31. button_repeat.onclick = repeat;
    , i6 k  U2 k. w2 T
32. button_previous.onclick = previous;
    
33. section.onload = play;
    
34. 
    $ Z+ {& t7 j. h9 e. b! v3 c
35. function next() {
    
36.     let index = parseInt(button_next.getAttribute('row_count'));
    
37.     index += 1;
    " b9 U  C5 b2 x% p% y" L
38.     button_next.setAttribute('row_count', index.toString())
    ) t5 S" d; j1 ~% u' H$ I5 U# F4 R8 y
39.     play().then(r => '');
    / h. C7 R) b; o
40. }
    
41. 
    
42. function previous() {
    7 o- w  L- ^' v$ p! P: \
43.     let index = parseInt(button_next.getAttribute('row_count'));
    
44.     index -= 1;
    
45.     button_next.setAttribute('row_count', index.toString())
    ! Z' d3 \$ ?* V7 B7 v& s* }
46.     play().then(r => '');
    
47. }
    
48. 
    7 [0 l9 [" X3 d0 e& m; O3 p- ?
49. function repeat() {
    - n! d( I" l* h# l8 [
50.     play().then(r => '');
    
51. }
    
52. 
    $ G/ @% @3 T+ s0 I; B
53. async function play() {
    
54.     const file = "NCE1-" + lesson + ".lrc";
    
55.     let myObject = await fetch(file);
    3 y6 c3 P$ |, w: w" F
56.     let myText = (await myObject.text()).trim();
    ! y- ^, p( a: @# s8 o
57.     let lines = myText.split('\n');
    % @8 y# n9 d7 R
58.     let index = parseInt(button_next.getAttribute('row_count'));
    . q; T- @3 @+ |0 j6 b
59. 
    , l: y# I4 q5 w  ~- P6 d
60.     if (index < 4) {
    5 ~$ \7 Y4 R9 Q
61.         index = lines.length - 1;
    
62.         button_next.setAttribute('row_count', index.toString());
    5 a5 \3 V/ o. W$ d1 B; E. m9 t
63.     }
    1 o- r2 i3 P5 M* t& v7 U9 Q
64.     if (index > lines.length - 1) {
    
65.         index = 4;
    
66.         button_next.setAttribute('row_count', index.toString());
    
67.     }
    5 F7 ?6 m( t6 _: n
68.     let current_line = lines[index];
    
69.     let text = current_line.slice(10, current_line.length - 1);
    $ U1 f3 b% Q- ~6 v1 r
70.     p.innerText = text;
    
71.     if (index < (lines.length - 1)) {
    
72.         let next_index = index + 1;
    
73.         let next_line = lines[next_index];
    
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]);
    
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;
    4 H  k9 y( ]' u8 O; K
80.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start + "," + end);
    
81.         const play1 = audio.play();
    
82.     } else {
    
83.         let current_time = current_line.slice(1, 9);
    
84.         let current_time_min_sec = current_time.split(':');
    ; Z# J9 d  Q2 W5 `8 }8 o
85.         let start = parseFloat(current_time_min_sec[0]) * 60 + parseFloat(current_time_min_sec[1]);
    ; {' p0 J' Z5 W5 R# t9 h+ W
86.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start);
    
87.         const play2 = audio.play();
    
88.     }
    
89. }

复制代码

- |5 ~# o& w" g8 ?/ V8 o: Z* O2 t8 X使用的时候，把下面网盘链接里面的Anki卡片导入，然后把新概念的音频和字幕文件拷贝到Anki的collection.media文件夹里面，如果不知道media文件夹的位置在网上搜索一下。

: |/ ]( [3 G7 ^

1. /*区块全局样式*/
   5 d* m% u, {4 E7 |
2. .section {
   * i4 W" _; N8 W! K7 y+ j% u
3.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
   
4.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
   9 [3 Q7 p3 N+ T% A
5.   border-radius    : 3px;                /*圆角幅度-3px*/
   
6.   margin           : 8px 8px;              /*上下间隔-8px*/
   $ b, P: k. V3 C. t( }1 p1 D& s
7.         display                                                 : flex;
   
8.         flex-direction                 : column;
   
9.         height: 95vh;
   ) z1 H- Q) V- v. l% A8 b2 _
10. }
    
11. 
      h7 T5 C9 ^$ w; s. |1 V% s
12. /*区块全局样式*/
    
13. .mobile .section {
    6 g; d: N, Y8 n, g& L
14.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
    ; Q! d/ k5 G- i5 U9 ~3 U$ O$ x
15.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
    
16.   border-radius    : 3px;                /*圆角幅度-3px*/
    
17.   margin           : 8px 8px;              /*上下间隔-8px*/
    & O$ x6 `) o* f& I1 k
18.         display                                                 : flex;
    
19.         flex-direction                 : column;
    
20.         height: 77vh;
    , y% A+ U+ C4 R; o- d
21. }

复制代码

, t3 n7 L( G9 l! t  Z在模板里面的css部分，可以调节整个区块的大小，修改height后面的数值来调节。前面有.mobile的是对移动设备的设置。

你也可以把这个模板稍加修改就可以添加新概念后面的几本书。

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

& v! G4 R8 M& t7 ~注意，因为iOS版本的Anki不会自动重新加载js，所以到第二张卡片的时候就会按钮显示不出来，退到deck界面再进去就可以了。

码农爱学习

这个思路跟我用来练习唱英文类似
+ b( }! Y, Z; R3 S* R
- h: J  Y" t2 W# B0 s7 \  d6 V【用Anki学唱英文歌，小段小段的练习，已经成功搞定几十首了】 https://www.bilibili.com/video/B ... 14ed81161268aaee250

zhangchaont

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

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

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

感谢分享，学习下