0115 修正字幕的內容

.gitignore

@@ -3,6 +3,7 @@
 *.ogg
 *.srt
 *.aac
+*.avi
 !chi.mp4
 !chi.srt
 !chi.ogg

README.md

@@ -27,4 +27,10 @@ https://codepen.io/martinwolf/pen/dyLAC
 
 https://www.youtube.com/watch?v=GE7sc_XvJ8w
 https://youtu.be/GE7sc_XvJ8w?t=21
-GE7sc_XvJ8w
+GE7sc_XvJ8w
+
+- 修正字幕最後的時間，不能超過影片時間
+
+https://www.nikse.dk/subtitleedit/online#
+
+https://www.pkstep.com/archives/38130#%E4%B8%8B%E8%BC%89

chi.srt

@@ -1,51 +1,15 @@
 1
-0:0:6:906 --> 0:0:11:910
-華語文能力測驗關鍵時刻
+00:00:01,625 --> 00:00:06,981
+昨天晚上的約會怎麼樣介紹的對像不錯吧
 
 2
-0:0:12:261 --> 0:0:15:317
-進階篇
+00:00:06,981 --> 00:00:10,199
+別忘了昨晚已經被問夠了
 
 3
-0:0:26:44 --> 0:0:31:87
-昨天晚上的約會怎麼樣介紹的對像不錯吧
+00:00:10,199 --> 00:00:24,450
+他來的舅媽才見面就問了我一堆問題在哪工作薪水多少是家裡的老大嗎家裡有哪些人就像是警察問犯人一樣
 
 4
-0:0:31:87 --> 0:0:34:394
-別問了昨晚已經被問夠了
-
-5
-0:0:34:394 --> 0:0:39:204
-他來的舅媽才見面就問了我一堆問題
-
-6
-0:0:39:204 --> 0:0:48:415
-打工作薪水多少是家裡的老大嗎家裡有哪些人就像是警察問犯人一樣
-
-7
-0:0:48:415 --> 0:0:51:988
-欣賞B賞什麼都不說
-
-8
-0:0:52:932 --> 0:0:57:729
-這位先生昨天晚上發生什麼事了
-
-9
-0:0:57:852 --> 0:1:1:345
-他去約會了
-
-10
-0:1:1:489 --> 0:1:4:550
-他什麼話也沒說
-
-11
-0:1:4:550 --> 0:1:8:657
-CK警察叫去問話了
-
-12
-0:1:8:801 --> 0:1:13:122
-的他的舅媽問很多問題
-
-13
-0:1:23:309 --> 0:1:27:575
-華語文能力測驗關鍵詞彙
+00:00:24,450 --> 00:00:28,638
+心臟病什麼都不說

lib/speech-to-text.js

@@ -2,12 +2,13 @@ let SpeechToText = {
   tbody: $('tbody.text-content'),
   player: null,
   setPlayer: function () {
-    this.player = $('.audio-player')
+    this.player = $('.audio-player')[0]
   },
   audioPlay: function () {
     if (this.player === null) {
       this.setPlayer()
     }
+
     if (this.getPlayerMode() === 'html') {
       this.player.play()
     }
@@ -141,7 +142,7 @@ let SpeechToText = {
     let currentTime
 
     if (this.getPlayerMode() === 'html') {
-      currentTime = this.player.prop('currentTime')
+      currentTime = this.player.currentTime
     }
     else if (this.getPlayerMode() === 'youtube') {
       currentTime = YouTubeUtils.getCurrentTime()
@@ -176,22 +177,32 @@ let SpeechToText = {
 
     return [hour, min, sec, minSec, currentTime]
   },
+  prefixPaddingZero: function (number, length) {
+    if (typeof(number) === 'number') {
+      number = number + ''
+    }
+
+    while (number.length < length) {
+      number = '0' + number
+    }
+    return number
+  },
   getContent: function () {
     let content = []
     this.tbody.find('tr').each((i, tr) => {
       tr = $(tr)
       let item = {}
       item.start = {
-        hour: tr.find('.start .hour').val(),
-        minute: tr.find('.start .minute').val(),
-        second: tr.find('.start .second').val(),
-        millisecond: tr.find('.start .millisecond').val(),
+        hour: this.prefixPaddingZero(tr.find('.start .hour').val(), 2),
+        minute: this.prefixPaddingZero(tr.find('.start .minute').val(), 2),
+        second: this.prefixPaddingZero(tr.find('.start .second').val(), 2),
+        millisecond: this.prefixPaddingZero(tr.find('.start .millisecond').val(), 3),
       }
       item.end = {
-        hour: tr.find('.end .hour').val(),
-        minute: tr.find('.end .minute').val(),
-        second: tr.find('.end .second').val(),
-        millisecond: tr.find('.end .millisecond').val(),
+        hour: this.prefixPaddingZero(tr.find('.end .hour').val(), 2),
+        minute: this.prefixPaddingZero(tr.find('.end .minute').val(), 2),
+        second: this.prefixPaddingZero(tr.find('.end .second').val(), 2),
+        millisecond: this.prefixPaddingZero(tr.find('.end .millisecond').val(), 3),
       }
       item.caption = tr.find('.caption textarea').val().trim(),
 

script.js

@@ -126,15 +126,15 @@ let downloadCaption = function () {
       contentItem.start.minute +
       ':'+
       contentItem.start.second +
-      ':'+
+      ','+
       contentItem.start.millisecond +
       ' --> '+
       contentItem.end.hour +
       ':'+
       contentItem.end.minute +
       ':'+
       contentItem.end.second +
-      ':'+
+      ','+
       contentItem.end.millisecond)
     item.push(contentItem.caption)
     content[i] = item.join('\n')

style.css

@@ -52,7 +52,7 @@ tbody.text-content th {
 
 tbody.text-content th input {
   text-align: right;
-  width: 2.1rem !important;
+  width: 2.2rem !important;
   font-size: 0.8rem !important;
   padding-left: 0 !important;
   padding-right: 0 !important;