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

zhangchaont

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

macOS上的效果
) I8 x$ p5 {' B9 F/ h' g! ~3 ?

js代码如下：
- U4 O# a' d4 b: E( p! [% J9 i2 d

1. const lesson = document.getElementsByClassName("items")[0].innerText;
   7 o# \' ^/ m. ?- J
2. const button_next = document.createElement("button");
     w7 R4 M1 b/ P3 R3 @
3. button_next.innerHTML = '下一句';
   * S* v6 C" `; {! Y
4. button_next.setAttribute('row_count', "4");
   0 k6 U+ S$ z: V
5. let section = document.getElementsByClassName("section")[0];
   
6. 
   2 B2 n: T$ W( p) Q2 k
7. const button_repeat = document.createElement("button");
   2 \7 U, H. x, Z0 B
8. button_repeat.innerHTML = '重复此句';
   1 Q- g3 m9 q1 Y- p# ?# _- y
9. 
   $ ]! A( s; K9 I
10. const button_previous = document.createElement("button");
    
11. button_previous.innerHTML = '上一句';
    $ j5 I& w/ G# z  M+ f
12. 
    7 N# C2 Z& \8 R; A; S* V: d
13. 
    * @( h3 l2 T* c+ k4 Z+ I
14. let div = document.createElement('div');
    
15. div.setAttribute('class', 'text');
    
16. section.appendChild(div);
    
17. let p = document.createElement('p');
    
18. div.appendChild(p);
    
19. 
    : S! C1 X& @4 v# p+ i2 t! W4 H
20. buttons_div = document.createElement('div');
    
21. buttons_div.setAttribute('class', 'buttons');
    
22. 
    ! x6 u4 a) M, q$ n. I
23. section.appendChild(buttons_div);
    
24. 
    # I& C4 C" T% J+ M# e
25. buttons_div.appendChild(button_previous);
    5 K" ?, k" q  y
26. buttons_div.appendChild(button_repeat);
    6 c: X; d* \$ p) D1 ~
27. buttons_div.appendChild(button_next);
    " f0 [1 h4 m' K
28. 
    6 p9 t* I/ j# P, H
29. 
    
30. button_next.onclick = next;
    
31. button_repeat.onclick = repeat;
    
32. button_previous.onclick = previous;
    
33. section.onload = play;
    1 J1 ^: @: D) T7 z
34. 
    
35. function next() {
    
36.     let index = parseInt(button_next.getAttribute('row_count'));
    . h: p- z+ W4 s3 i# E
37.     index += 1;
    $ v: \" ^: N, _4 p5 o& R
38.     button_next.setAttribute('row_count', index.toString())
      o9 l- E1 f  y. {) m4 t$ |6 {; T* E
39.     play().then(r => '');
    ' O! C. l% k/ x9 L
40. }
    
41. 
    
42. function previous() {
    
43.     let index = parseInt(button_next.getAttribute('row_count'));
    
44.     index -= 1;
    7 l1 L' M7 A/ p4 R" O
45.     button_next.setAttribute('row_count', index.toString())
    
46.     play().then(r => '');
    " N1 o% N* Q: i! k
47. }
    
48. 
    3 Q1 V5 S7 F. T- J2 U4 y
49. function repeat() {
    
50.     play().then(r => '');
    ; D9 W0 }7 B' n: k5 u( k. p
51. }
    $ s" c9 ~) Y. C9 |
52. 
    2 d: W# ~: B4 f! ]+ X& Q" ^
53. async function play() {
    
54.     const file = "NCE1-" + lesson + ".lrc";
    # c: ?/ R( L7 m: G+ |
55.     let myObject = await fetch(file);
    . ]+ q" }' ~0 X1 p8 E  o" E% L
56.     let myText = (await myObject.text()).trim();
    # l0 x) r; w3 n5 m: o' Z
57.     let lines = myText.split('\n');
    
58.     let index = parseInt(button_next.getAttribute('row_count'));
    # f$ ^" Z: N0 ]+ {
59. 
    ! K" A! T' B  L$ ?' K
60.     if (index < 4) {
    
61.         index = lines.length - 1;
    
62.         button_next.setAttribute('row_count', index.toString());
    
63.     }
    
64.     if (index > lines.length - 1) {
    
65.         index = 4;
    
66.         button_next.setAttribute('row_count', index.toString());
    * S4 R- `- s6 k; \* h2 M5 e
67.     }
    6 W! Q2 v- `5 O/ t, ~0 O, }+ C
68.     let current_line = lines[index];
    1 @; f0 w8 P. C8 _* d
69.     let text = current_line.slice(10, current_line.length - 1);
    
70.     p.innerText = text;
    7 q9 |$ J! g/ H: f! V0 k: R
71.     if (index < (lines.length - 1)) {
    ) f4 W% n" T1 K$ Z5 C/ ~
72.         let next_index = index + 1;
    
73.         let next_line = lines[next_index];
    * l5 A" {) e" ]+ |$ y: {
74.         let current_time = current_line.slice(1, 9);
    
75.         let current_time_min_sec = current_time.split(':');
    : C9 M* N8 b+ F9 V! _4 _7 L% [
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);
    % w! o0 `& m: ^
78.         let next_time_min_sec = next_time.split(':');
    1 W4 R. @* l/ A8 j  }& C8 R
79.         let end = parseFloat(next_time_min_sec[0]) * 60 + parseFloat(next_time_min_sec[1]) - 0.25;
    $ Z, s9 z& r* z, F
80.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start + "," + end);
    
81.         const play1 = audio.play();
    
82.     } else {
    7 i7 R, h3 O6 T; ^! [' D. q0 x$ _2 d
83.         let current_time = current_line.slice(1, 9);
    
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]);
    . }5 a3 H. N  X9 x5 ]$ u. I
86.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start);
    0 O: c* `# m. @7 L' f
87.         const play2 = audio.play();
    & G0 _: F: y( Z% f4 \
88.     }
    " W5 b) T9 s2 k
89. }

复制代码

使用的时候，把下面网盘链接里面的Anki卡片导入，然后把新概念的音频和字幕文件拷贝到Anki的collection.media文件夹里面，如果不知道media文件夹的位置在网上搜索一下。

  K0 u; L/ i" A

1. /*区块全局样式*/
   
2. .section {
   
3.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
   9 _* t/ g+ f$ I$ B' U/ p- v8 A
4.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
   
5.   border-radius    : 3px;                /*圆角幅度-3px*/
   
6.   margin           : 8px 8px;              /*上下间隔-8px*/
   
7.         display                                                 : flex;
   
8.         flex-direction                 : column;
   , y% D* W' c; M# _9 I7 _+ E3 [
9.         height: 95vh;
   
10. }
    " a! V9 T* h6 ~+ L+ q: r: o# i$ v7 f
11. 
    % |3 p1 H0 C% F+ N+ U8 W+ D0 u
12. /*区块全局样式*/
    6 p# A( ]* C. l+ Z/ H
13. .mobile .section {
      {& r, Z% \- B( N" a( D
14.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
    ( h4 b9 I( S; r1 {& ?
15.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
      C( v! o" C- D. v- i0 A, T
16.   border-radius    : 3px;                /*圆角幅度-3px*/
    
17.   margin           : 8px 8px;              /*上下间隔-8px*/
    + p- L5 n# x" s; ?9 l
18.         display                                                 : flex;
    0 i/ K. M+ Q/ y# B6 I0 d
19.         flex-direction                 : column;
    . r$ F7 K) b- z: B3 `8 ~
20.         height: 77vh;
    
21. }

复制代码

. R; Z9 H' b7 s2 f在模板里面的css部分，可以调节整个区块的大小，修改height后面的数值来调节。前面有.mobile的是对移动设备的设置。
2 B0 Y0 h5 J+ M) X* f( W. A
( O& ^' P$ Z5 w! S你也可以把这个模板稍加修改就可以添加新概念后面的几本书。
9 D& n; Q+ [, R0 g4 E& \
+ X2 D( o& K7 M

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

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

码农爱学习

这个思路跟我用来练习唱英文类似
% q' c! D# \$ k& \# y/ F/ R& I
' d- f) \% s  j; K4 n$ T% G【用Anki学唱英文歌，小段小段的练习，已经成功搞定几十首了】 https://www.bilibili.com/video/B ... 14ed81161268aaee250

zhangchaont

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

% M9 O2 l, b% h# {) q7 J8 d# h  \第二册的资源我应该有的，等我空了我找找做一下。

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

感谢分享，学习下