Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

建立波形圖，創建字幕條，可以更改字幕內容與更改時間標，以及一些優化 #11

Open
wants to merge 31 commits into
base: master
Choose a base branch
from
Open

建立波形圖，創建字幕條，可以更改字幕內容與更改時間標，以及一些優化 #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
a1fe4fd
新增空白鍵可以撥放/暫停影片
anosanstudio Oct 17, 2021
0b05623
空白鍵現在可以撥放/暫停
anosanstudio Oct 17, 2021
4975649
改進布局以為之後的更新做準備
anosanstudio Nov 5, 2021
9ae0375
最後一行加入換行
anosanstudio Nov 5, 2021
2f0d888
可以用按鈕輸出字幕檔
anosanstudio Nov 5, 2021
755f2d2
引入WaveSurfer腳本以建立波形圖，以及波形圖與影片時間線、暫停、播放的同步功能
anosanstudio Nov 6, 2021
ebad50c
main.js格式化
anosanstudio Nov 6, 2021
8e0736a
新增核取方塊啟用或關閉reactTime，改變reactTime的宣告類型從const改為let
anosanstudio Nov 7, 2021
bf2f22f
調整html內的元素(class:left,right)順序，增加可讀性
anosanstudio Nov 7, 2021
10dec25
當currentStamping等於0時不能再上捲，單純按i跟o也可以改變Stamping Line
anosanstudio Nov 7, 2021
1575caa
新增字幕軸與容器的css與元素本體，字幕軸跟隨波形圖移動
anosanstudio Nov 7, 2021
78407d6
新增拉伸區域的游標圖，若沒有會用瀏覽器的預設，可自訂圖案，改檔名就好(Lcursor與Rcursor
anosanstudio Nov 7, 2021
bb6e988
對K,L鍵進行重構，使用L時如果時間超出下一行開頭將會更新下一行開頭時間，K,L可以創建字幕條圖型
anosanstudio Nov 7, 2021
1bfa234
格式化
anosanstudio Nov 7, 2021
6a21749
拖動字幕條可以更新字幕的時間(等同'k'和'l'的效果)，並會新建新的字幕條
anosanstudio Nov 7, 2021
5fa4d64
雙擊字幕條會開啟輸入框，輸入框輸入的文字會改變subTexts裡的內容，也可以取消
anosanstudio Nov 8, 2021
8cdded4
防止鍵盤事件連續觸發，防止誤觸，創建輸入框時不會觸發鍵盤事件
anosanstudio Nov 8, 2021
e67ad87
前捲(i)、後捲(o)、 倒帶(u)、前進(p)按住可以連續觸發
anosanstudio Nov 8, 2021
4c70d12
將Kkeyfunction跟Lkeyfunction的reactTime參數預設為0，方便以後呼叫
anosanstudio Nov 9, 2021
a26a269
上傳時自動刪除空白行，修改最後一行無法上時間標的Bug
anosanstudio Mar 29, 2022
4169f55
取消this語法
anosanstudio Sep 21, 2022
e2974ca
格式化
anosanstudio Sep 21, 2022
73e21e5
更改拉伸圖標使其更明顯
anosanstudio Sep 22, 2022
64092a7
由於有波形圖輔助，reactTime預設為關閉
anosanstudio Mar 17, 2023
6ca00e4
新增自動跳轉，如果拖動字幕條後有未上時間標的字幕，將會自動跳轉
anosanstudio Mar 17, 2023
c90f774
使輸入框也支持自動跳轉
anosanstudio Mar 18, 2023
c0b4390
播放頭也會自動跳轉
anosanstudio Mar 18, 2023
a172842
新增支援上傳srt檔，時間會自動解析並保存
anosanstudio Mar 19, 2023
e044d16
在上傳字幕檔的按鈕旁提示，可以上傳txt與srt檔
anosanstudio Mar 19, 2023
b41b6ac
Update README.md
anosanstudio Mar 28, 2023
15aa888
Update README.md
anosanstudio Mar 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Lcursor.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
Fork from [wiwikuan/fast-srt-subtitle](https://github.com/wiwikuan/fast-srt-subtitle).
# fast-srt-subtitle
Make SRT Caption Fast!!!! This is a fast and dirty javascript SRT caption tool.

Expand All @@ -11,3 +12,6 @@ Make SRT Caption Fast!!!! This is a fast and dirty javascript SRT caption tool.
* Q: Make SRT File

Enjoy.

# Demo
[demo](https://anosanstudio.github.io/fast-srt-subtitle/)
Binary file added Rcursor.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
145 changes: 114 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,118 @@
<html>
<title>Fast and Dirty Captioner</title>
<title>Fast and Dirty Captioner</title>

<head>
<meta charset="UTF-8" />
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/wavesurfer.js"></script>

<style>
.video {
width: 960px;
}
</style>
</head>
<style>
.header {
height: 6%;
text-align: center;
line-height: 250%;
}

<body>
<p>選取字幕檔以及影片檔案開始製作 SRT！</p>
<label>
<span>選擇字幕檔案：</span>
<input
id="srtFile"
type="file"
name="srtFile"
placeholder="點擊上傳字幕檔"
/>
</label>
.left {
width: 50%;
float: left;
}

.video {
width: 100%;
float: left;
}

#waveform {
width: 100%;
float: left;
}

#MakeSrtBtn {
margin-top: 1%;
float: right;
}

#subbox {
width: 100%;
float: left;
overflow-x: hidden;
height: 40px;
position: relative;
}

#subtainer {
background: Gray;
width: 100%;
height: 20px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

.subleft {
float: left;
width: 5px;
height: 100%;
cursor: url("Lcursor.png") 12 12, col-resize;
transition: 0.2s;
}

.subleft:hover {
float: left;
width: 5px;
height: 100%;
background: Magenta;
cursor: url("Lcursor.png") 12 12, col-resize;
}

.subright {
float: right;
width: 5px;
height: 100%;
cursor: url("Rcursor.png") 12 12, col-resize;
transition: 0.2s;
}

.subright:hover {
float: right;
width: 5px;
height: 100%;
background: Yellow;
cursor: url("Rcursor.png") 12 12, col-resize;
}

.right {
float: right;
width: 49%;
}
</style>
</head>

<body>
<div class="header">選取字幕檔以及影片檔案開始製作 SRT！</div>
<div class="left">
<label>
<span>選擇影片檔案：</span>
<input
id="videoFile"
type="file"
name="videoFile"
placeholder="點擊上傳影片檔"
/>
<input id="videoFile" type="file" name="videoFile" placeholder="點擊上傳影片檔" />
</label>
<p>
<video class="video" id="video" controls></video>
</p>
<div id="subbox">
<div id="subtainer"></div>
</div>
<div id="waveform"></div>
<button id="MakeSrtBtn">匯出 SRT 檔</button>
</div>
<div class="right">
<p id="status">Test Text.</p>
<textarea id="textArea" rows="10" cols="80">預設的字。</textarea>
<p>
<label>
<span>選擇字幕檔案(txt或srt檔)：</span>
<input id="srtFile" type="file" name="srtFile" placeholder="點擊上傳字幕檔" />
</label>
</p>
<p>
K: 下一行開始 | L: 這一行提前結束 | I: 前捲一行 | O: 後捲一行 | U: 倒帶 2
秒 | P: 前進 2 秒 | Q: 製作 SRT 檔
Expand All @@ -39,9 +121,10 @@
K: Next Line | L: This Line Ends Early | I: Scroll Back | O: Scroll
Forward | U: Rewind | P: Forward | Q: Make SRT File
</p>
<p id="status">Test Text.</p>
<textarea id="textArea" rows="10" cols="80">預設的字。</textarea>
<video class="video" id="video" controls></video>
</body>
<script src="main.js"></script>
<input type="checkbox" id="checkbox">Reaction Time
<input type="checkbox" id="autoJumpCheckbox" checked="checked">Auto Jump
</div>
</body>
<script src="main.js"></script>

</html>
Loading