新概念英语第一册 - 带复读机按钮
本帖最后由 zhangchaont 于 2021-2-20 10:53 编辑为了给孩子学习英语，我把单词做成了卡片放在Anki里，但是课文却一直没有什么好的方法，在电脑上用一个复读机软件给孩子们练习，但是Mac上没有什么好用的复读机软件，所以学来学去还在最开始的几课里面打转。我本来想自己写一个复读机APP的，但是考虑到水平有限，估计得花很多时间，而且最大的问题不能利用Anki里schedule安排学习。
春节在家，我突然灵光一闪，Anki是基于PyQt5开发，而这个模块是支持一部分html、css和javascript的，如果用javascript读取字幕里面的时间戳，然后根据时间段来播放MP3，不就实现了一个简单的复读机了嘛。说干就干，因为没有javascript语言基础，都是需要什么就搜索，一步步的拼凑起来的，目前已经基本能用，成品在iOS上显示如下：
macOS上的效果
js代码如下：
const lesson = document.getElementsByClassName("items").innerText;
const button_next = document.createElement("button");
button_next.innerHTML = '下一句';
button_next.setAttribute('row_count', "4");
let section = document.getElementsByClassName("section");
const button_repeat = document.createElement("button");
button_repeat.innerHTML = '重复此句';
const button_previous = document.createElement("button");
button_previous.innerHTML = '上一句';
let div = document.createElement('div');
div.setAttribute('class', 'text');
section.appendChild(div);
let p = document.createElement('p');
div.appendChild(p);
buttons_div = document.createElement('div');
buttons_div.setAttribute('class', 'buttons');
section.appendChild(buttons_div);
buttons_div.appendChild(button_previous);
buttons_div.appendChild(button_repeat);
buttons_div.appendChild(button_next);
button_next.onclick = next;
button_repeat.onclick = repeat;
button_previous.onclick = previous;
section.onload = play;
function next() {
let index = parseInt(button_next.getAttribute('row_count'));
index += 1;
button_next.setAttribute('row_count', index.toString())
play().then(r => '');
}
function previous() {
let index = parseInt(button_next.getAttribute('row_count'));
index -= 1;
button_next.setAttribute('row_count', index.toString())
play().then(r => '');
}
function repeat() {
play().then(r => '');
}
async function play() {
const file = "NCE1-" + lesson + ".lrc";
let myObject = await fetch(file);
let myText = (await myObject.text()).trim();
let lines = myText.split('\n');
let index = parseInt(button_next.getAttribute('row_count'));
if (index < 4) {
index = lines.length - 1;
button_next.setAttribute('row_count', index.toString());
}
if (index > lines.length - 1) {
index = 4;
button_next.setAttribute('row_count', index.toString());
}
let current_line = lines;
let text = current_line.slice(10, current_line.length - 1);
p.innerText = text;
if (index < (lines.length - 1)) {
let next_index = index + 1;
let next_line = lines;
let current_time = current_line.slice(1, 9);
let current_time_min_sec = current_time.split(':');
let start = parseFloat(current_time_min_sec) * 60 + parseFloat(current_time_min_sec);
let next_time = next_line.slice(1, 9);
let next_time_min_sec = next_time.split(':');
let end = parseFloat(next_time_min_sec) * 60 + parseFloat(next_time_min_sec) - 0.25;
let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start + "," + end);
const play1 = audio.play();
} else {
let current_time = current_line.slice(1, 9);
let current_time_min_sec = current_time.split(':');
let start = parseFloat(current_time_min_sec) * 60 + parseFloat(current_time_min_sec);
let audio = new Audio("NCE1-" + lesson + ".mp3" + "#t=" + start);
const play2 = audio.play();
}
}
使用的时候，把下面网盘链接里面的Anki卡片导入，然后把新概念的音频和字幕文件拷贝到Anki的collection.media文件夹里面，如果不知道media文件夹的位置在网上搜索一下。
/*区块全局样式*/
.section {
background-color : #f6f6f6; /*背景颜色-#f6f6f6*/
border : 2px solid #3f3f41;/*边缘样式-实线2px*/
border-radius : 3px; /*圆角幅度-3px*/
margin : 8px 8px; /*上下间隔-8px*/
display : flex;
flex-direction : column;
height: 95vh;
}
/*区块全局样式*/
.mobile .section {
background-color : #f6f6f6; /*背景颜色-#f6f6f6*/
border : 2px solid #3f3f41;/*边缘样式-实线2px*/
border-radius : 3px; /*圆角幅度-3px*/
margin : 8px 8px; /*上下间隔-8px*/
display : flex;
flex-direction : column;
height: 77vh;
}
在模板里面的css部分，可以调节整个区块的大小，修改height后面的数值来调节。前面有.mobile的是对移动设备的设置。
你也可以把这个模板稍加修改就可以添加新概念后面的几本书。
**** Hidden Message *****
注意，因为iOS版本的Anki不会自动重新加载js，所以到第二张卡片的时候就会按钮显示不出来，退到deck界面再进去就可以了。 这个思路跟我用来练习唱英文类似
【用Anki学唱英文歌，小段小段的练习，已经成功搞定几十首了】 https://www.bilibili.com/video/BV1HXhYevEue/?share_source=copy_web&vd_source=fa3a2baa181b814ed81161268aaee250 yensen2006 发表于 2021-7-20 20:44
多谢多享！有没有第二册？
第二册的资源我应该有的，等我空了我找找做一下。 HAVEA LOOK,THX 学习一下 Thanks for sharing... 下来看看学习- W 感谢分享 这个牛。感谢楼主。 多谢分享好资源！ 好东西。谢谢。 谢谢分享 感谢分享 学习新概念的人可以好好利用这个资料。 谢谢分享 楼主厉害了 感谢分享 thanks a lot 感谢楼主~ 感谢分享。 thanks a lot 谢谢分享。 感谢楼主分享 非常的不错 挺好，有创意，一切为了孩子。好父母 多谢分享好资源！ 多谢多享！有没有第二册？ 感谢分享，学习下