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

zhangchaont

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

春节在家，我突然灵光一闪，Anki是基于PyQt5开发，而这个模块是支持一部分html、css和javascript的，如果用javascript读取字幕里面的时间戳，然后根据时间段来播放MP3，不就实现了一个简单的复读机了嘛。说干就干，因为没有javascript语言基础，都是需要什么就搜索，一步步的拼凑起来的，目前已经基本能用，成品在iOS上显示如下：
- \8 L9 r$ n" U& O/ A; w
5 I( s6 x* P0 A0 D0 CmacOS上的效果
7 l( I, A! R6 Y; ?, a- I) ^1 F
4 L" x5 U3 X2 k
4 W5 K2 y9 o$ M. O" p) @/ w& l& Ojs代码如下：
8 ?2 Q/ ^$ w6 D& m( @3 V

1. const lesson = document.getElementsByClassName("items")[0].innerText;
   6 _) \9 [. e& t' k  M: i
2. const button_next = document.createElement("button");
   0 `9 t% E2 `6 M- Z0 d
3. button_next.innerHTML = '下一句';
   
4. button_next.setAttribute('row_count', "4");
   1 q5 b4 G, B, z2 R/ [3 ~: ]" G
5. let section = document.getElementsByClassName("section")[0];
   
6. 
   
7. const button_repeat = document.createElement("button");
   - n0 M6 G3 u6 F" j4 G2 N
8. button_repeat.innerHTML = '重复此句';
   
9. 
   ; Q7 Z% w. V" N
10. const button_previous = document.createElement("button");
    ) {+ R" X: D: {( G
11. button_previous.innerHTML = '上一句';
    8 x1 P, q7 P6 R( Z- p( V( B
12. 
    
13. 
    " b: a) E2 w4 x' W1 {9 h
14. let div = document.createElement('div');
    
15. div.setAttribute('class', 'text');
    
16. section.appendChild(div);
      r4 D* ~+ O+ E  M" k2 P4 R  H& t% ~# ?
17. let p = document.createElement('p');
    
18. div.appendChild(p);
    
19. 
    / L0 A  F6 L9 Z8 H  ^+ \3 s
20. buttons_div = document.createElement('div');
    ' {, n1 F6 d% r+ \# m# m
21. buttons_div.setAttribute('class', 'buttons');
    
22. 
    
23. section.appendChild(buttons_div);
    
24. 
    
25. buttons_div.appendChild(button_previous);
    , C, Q( y( d! X5 b, o
26. buttons_div.appendChild(button_repeat);
    ; [) [" R# A1 d' O
27. buttons_div.appendChild(button_next);
    9 `: r6 c2 d) a  T( [
28. 
    ; V! M  v3 i8 B6 m
29. 
      \; l+ O: s# U, j! t$ H! w! C
30. button_next.onclick = next;
    
31. button_repeat.onclick = repeat;
    ! z# F* _) }' n. B
32. button_previous.onclick = previous;
    4 o7 t% P1 H9 b8 v" h$ n
33. section.onload = play;
    $ v/ |( T& c: F& i( i. L2 }
34. 
    
35. function next() {
    4 }4 u1 v, R2 D+ l
36.     let index = parseInt(button_next.getAttribute('row_count'));
    
37.     index += 1;
    8 |8 p. {# `; H* N7 j
38.     button_next.setAttribute('row_count', index.toString())
    
39.     play().then(r => '');
    6 K: I8 S3 b6 D( r9 K
40. }
    
41. 
    6 S% L( R2 }  P/ D  V: i) M
42. function previous() {
    
43.     let index = parseInt(button_next.getAttribute('row_count'));
    $ u. ^1 j) ?) S& `8 h' X& m
44.     index -= 1;
    
45.     button_next.setAttribute('row_count', index.toString())
    1 n) h7 {0 t/ U. H
46.     play().then(r => '');
    
47. }
    
48. 
    
49. function repeat() {
    
50.     play().then(r => '');
    
51. }
    
52. 
    
53. async function play() {
    
54.     const file = "NCE1-" + lesson + ".lrc";
    
55.     let myObject = await fetch(file);
    
56.     let myText = (await myObject.text()).trim();
    9 w0 \  k+ ^9 F; }! m' {8 M- ^
57.     let lines = myText.split('\n');
    
58.     let index = parseInt(button_next.getAttribute('row_count'));
    
59. 
    ' v: s# ?' l; T; s
60.     if (index < 4) {
    
61.         index = lines.length - 1;
    ; z# V; C6 r  L# m
62.         button_next.setAttribute('row_count', index.toString());
    * r- _/ w! ~6 u2 Z1 \& g
63.     }
    
64.     if (index > lines.length - 1) {
    6 b$ t1 P* k, a6 [5 J
65.         index = 4;
    
66.         button_next.setAttribute('row_count', index.toString());
    
67.     }
    ) q" q; W2 Y! s0 m- v- x9 x# p
68.     let current_line = lines[index];
    
69.     let text = current_line.slice(10, current_line.length - 1);
    2 [  j% ?4 T+ k, J7 }3 C5 b
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(':');
    ' z1 O) b1 n- [! m  Q5 T
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);
    & \1 E: d, z6 o2 Z# M: R( Z2 `
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;
    # J: ]# X5 U+ X. t( ^* w: Z1 G
80.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start + "," + end);
    : m) N5 B9 A! v$ q, t
81.         const play1 = audio.play();
    . ?2 B" i4 I# i/ s
82.     } else {
    - k2 E, |# K# l" U9 ?
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]);
    # }6 z" q' G- A2 |; d  R
86.         let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start);
    / Q& c) H7 J$ c" f
87.         const play2 = audio.play();
    . y! Q- p# s, k
88.     }
    6 d6 ]- @# x' p1 v: b/ }* |0 k
89. }

复制代码

$ ^! p# [. T+ `: n* ]! z+ \# o$ r
使用的时候，把下面网盘链接里面的Anki卡片导入，然后把新概念的音频和字幕文件拷贝到Anki的collection.media文件夹里面，如果不知道media文件夹的位置在网上搜索一下。
5 @6 l/ u' F3 O) l  @' C* j# y; ?; [

1. /*区块全局样式*/
   
2. .section {
   0 j1 p2 K4 i! F4 ~+ H
3.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
   ( g6 [7 C; p$ @8 ?
4.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
   / |! E0 b( K; K/ `* x8 _
5.   border-radius    : 3px;                /*圆角幅度-3px*/
   
6.   margin           : 8px 8px;              /*上下间隔-8px*/
   
7.         display                                                 : flex;
   & V2 @/ }  ]: Y! a( B# w$ ]5 p
8.         flex-direction                 : column;
   
9.         height: 95vh;
   5 Z' `( ]/ H$ M! j5 n* n7 |
10. }
    ( t0 {  l# c  Z! C+ I* n
11. 
    
12. /*区块全局样式*/
      c6 C0 f8 E* f- _+ o
13. .mobile .section {
    
14.   background-color : #f6f6f6;            /*背景颜色-#f6f6f6*/
    
15.   border           : 2px solid #3f3f41;  /*边缘样式-实线2px*/
    3 t$ T3 [- D9 u& Z, g( i
16.   border-radius    : 3px;                /*圆角幅度-3px*/
    
17.   margin           : 8px 8px;              /*上下间隔-8px*/
    ( V# O6 n! V4 S- r1 L9 r+ b
18.         display                                                 : flex;
    
19.         flex-direction                 : column;
    3 Q0 y# @/ u4 w1 Z2 k1 j
20.         height: 77vh;
    
21. }

复制代码

在模板里面的css部分，可以调节整个区块的大小，修改height后面的数值来调节。前面有.mobile的是对移动设备的设置。
9 z5 j$ b: p, H" F
9 W% V0 f/ W3 H' H1 Q你也可以把这个模板稍加修改就可以添加新概念后面的几本书。

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

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

zhangchaont

yensen2006 发表于 2021-7-20 20:44
( u) w, J( V( |0 k. L- O多谢多享！有没有第二册？

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

xingqiji

HAVE  A   LOOK,THX

fjfzjmok

HAVE  A   LOOK,THX
: X' \; Q& e- d! [* X* U/ 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

感谢分享，学习下