hi zhw2590582, I have added the following functionalities to your project :
1- some styling changes.
2- you can now change the end and start of the subtitle from the subtitles box as well as the time meter at the bottom.
3- you have a right menu option to copy subtitle text directly to the clipboard.
4- you can select multiple subtitles and do functions on them.
5- if you select one or more subtitles the vedio will loop from the start of the first select sub until the finish of the last sub, and will never pass until you choose that, so this will give you more power to work on a single sub.
6- dynamically choose the shifting offset.
7- more uploading option like from a url or Google drive.

if you interested in adding those functions please tell me so I can make a pull request with the changes.

cheers
Ahmad

docs/index.html

function() {
    if (!isLocalhost) {
        var o = document.createElement("script");
        o.src = "https://hm.baidu.com/hm.js?9c948099957cd6a524dac835394d4495";
        var t = document.getElementsByTagName("script")[0];
        t.parentNode.insertBefore(o, t)
    }
}()

This subtitle editor is the most fully functional one on GitHub, and I appreciate your work on it. However, I believe that the project's dependencies have been broken for a while. I noticed that it's mentioned in January 2023 that these issues would be fixed, but they still seem to be unresolved as of now (July 2024). If it's not too much trouble, could you provide the specific versions of all the packages and the environment needed to keep it up and running? Alternatively, if possible, could you provide a Docker image?

Thank you for your help!

Hi Team ,
I am trying to use this awesome sublayer for my subtitle editing .I am facing issues with integration. it is showing error on uploading video. this error is coming as popup with "Loading Dependency" and doesn't close.

Hi @zhw2590582 ,
it happens that some subs are synchronized with other raws, different from what we find.

Would it be possible to add an option to add or remove start and end times to all subtitles present?
I don't know if I was able to explain myself well.

A long subtitles that crossed a whole section over the timeline will not be displayed:

timeline ->
block1 | block2 | block3
   |------longsub-----|

It will display in block1 and block3 normally, but not block2.

this is awesome work! Thank you! I only have one question: is there a trivial way to add playback speed control to the video display element?

看到 SubPlayer 有了升级版的《爱慕》功能也多了。
佩服、佩服、

Hi Harvey,

I get an error when minimizing or exiting browser and executing the npm run build command again in the visual studio code terminal.

Kind regards,
Indunil Sanjeewa

EDIT: I found #16 mentioned editable time boxes, then this issue only posts the idea of automatically tiling.

If I did not miss anything, then the only ways to modify the time are dragging and offset buttons.

It is good to make time editable, because sometimes it is impossible to put one subtitle next to the previous one, just by one unit time. Or put it exactly on the right time just by dragging.

It will be even better that if the current subtitle, when modifying the range of time or moving, can automatically(magnetically) tile to the nearest timeline, or other subtitles. That would be a huge improvement on user interface and productivity.

Hi, I use artplayer to play a m3u8 list, that is ok. but waveform cannot be create on the bottom of the page. It gived a error that: "Uncaught (in promise) DOMException: Unable to decode audio data". It there some solution about that？I think it may not was a issule of subplayer. Wish you reply， thank you！

When opening a video, the following error occurs. The tool does not load the video in the player.

Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
at t.value (wfplayer.js:8)
at Tool.js:372
at Object.Be (react-dom.production.min.js:52)
at $e (react-dom.production.min.js:52)
at react-dom.production.min.js:53
at Cr (react-dom.production.min.js:100)
at Or (react-dom.production.min.js:101)
at react-dom.production.min.js:113
at Le (react-dom.production.min.js:292)
at react-dom.production.min.js:50

It could add the functionality of cutting a caption on the timeline by adding a new line from the cutoff point so that you can break large texts that are on just one line.

Hi @zhw2590582 ,
it happens that when I load a video and subtitles and then reload the page the subtitles remain, but the video doesn't.

1. I upload the video
2. I upload the subtitles
3. I update page F5
4. The video I uploaded does not appear, in its place the default one (I think normal behavior).
   But the subtitles those uploaded by me remain, but not the default ones.

In addition to merging or separating overlapping captions, there should be an option to move one to a separate "track" in the editor, in which captions are, say, aligned to the top of the viewbox (in VTT, these would have line:1 as a cue setting). This would support people talking over each other for durations longer than comfortably handled with just dashes and line breaks. An example would be a person whispering to another (with captions at the bottom) while there is an announcement going on simultaneously (with captions at the top).

上传一个时长较长的视频后会出现明显的卡顿

想要自写一个字幕样式的动态配置，参考artplayer的文档在subtitle: { style: {'font-size': '28px'}} 生效了, 但是当我更改配置时 player.js接受到了参数但是实际style没有改变。

Video loading and export works fine at localhost ( during development locally) but when I deploy it on AWS then through deployed link it give "Decoding audio failed" and also doesn't show video export option.
Please help me.

另外想请问有在安装时遇到下列报错吗， 我这安装了几次没安成功
No matching version found for react-i18nify@^3.1.6

后来吧 package.json 里面的相关依赖改成了 "react-i18nify": "^3.0.0", 安上了

我有个小问题有点苦恼，四处查阅无解，想到 github 上有 zhw2590582 或许可以一问：

我最近写一个工程，发现写想把 【音频文件】存到 indexedDB 很顺利
● 但解析出来的 AudioBuffer 存不到 indexedDB 中。
● 另外 getChannelData() 我做过尝试，能存上，但音频时长太大，就存失败

请问上述两个类型的数量有存到 indexedDB 的可能性吗
谢谢

补充一下：
找到方法了，getChannelData() 的返回值如果太大。转为blob之后就能顺利保存到 indexedDB 了。
然后再从 blob 解析出来 ChannelData

Dear Harvey,
Please be kind enough to tell me what is wrong in this code to set colors to a set of strings in the Subtitles editor. I want to make sure that the colors won't change.

If I can push the array using this plugin it would help but the attempts I did so far failed.
https://bossanova.uk/jexcel/v3/

var titlesArray = ["Subtitles", "Captions", "Chapters", "Description", "Interaction", "Metadata"];
var colors = ["orange", "yellow", "blue", "lime", "purple", "pink"];

for(var index = 0; index < subtitles.length; index++) {
    var newArray = titlesArray.push("Subtitles", "Captions", "Chapters", "Description", "Interaction", "Metadata"); 
}

for(var colorIndex = 0; colorsIndex < titlesArray.length; colorsIndex++) {

/* var colorArray = colors.push("orange", "yellow", "blue", "lime", "purple", "pink"); */

    $('#colorWindow').css('color', function(titleIndex) {
        return colors[titleIndex % colors.length];
    });
}

Any help would be greatly appreciated.

Kind regards,
Indunil Sanjeewa

Hi Harvey,
Can I include the following link on my portfolio?
https://subplayer.js.org/

Kind regards,
Indunil Amarasinghe

I overlapped 2 blocks of text, and if I tried to separate them I got this error

page keeps crashing when playing a video that is 110mb...

Hi @zhw2590582 ,

I was thinking about the following small style changes:

1. Video textarea
2. Bar and handle
3. Timeline sub-item

Let me know what you think.

Compiled with problems:
×
ERROR
Unexpected token '<'
SyntaxError: Unexpected token '<'
ERROR
createFFmpegCore is not defined
ReferenceError: createFFmpegCore is not defined
    at HTMLScriptElement.eventHandler (http://localhost:3000/static/js/bundle.js:6219:11)

Node v16, MacOS

如题。
因为有时候，仅需要调整字幕文件的内容（保留当前的字幕文件格式（srt、ass））。
感谢大佬们的付出！

大佬，本地部署后，chrome打开遇到下面问题：

Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined

Chrome 版本 122.0.6261.94（正式版本） (arm64)

package.json 如下：

  "dependencies": {
    "@ffmpeg/ffmpeg": "^0.11.6",
    "@ffmpeg/core": "^0.11.0",
    "@forlagshuset/simple-fs": "^0.5.0",
    "core-js": "^3.18.0",
    "duration-time-conversion": "^1.0.5",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.1.1",
    "lodash": "^4.17.21",
    "next": "^14.1.1",
    "normalize.css": "^8.0.1",
    "option-validator": "^2.0.6",
    "react": "^18.2.0",
    "react-contextmenu": "^2.14.0",
    "react-dom": "^18.2.0",
    "react-i18nify": "^4.2.1",
    "react-notification-system": "^0.4.0",
    "react-scripts": "5.0.1",
    "react-textarea-autosize": "^8.3.3",
    "react-virtualized": "^9.22.3",
    "styled-components": "^5.3.1",
    "wfplayer": "^2.1.0",
    "webpack": "^5.90.3",
    "html-entities": "^2.5.2"
  },

Hi Harvey,
Please be kind enough to fix the Google Translate error on this repo with the guidelines given on the following link;

https://objectcomputing.com/resources/publications/sett/september-2018-web-translate-javascript-library

Thanks and Regards,
Indunil Sanjeewa

Hey @zhw2590582,

Please help me to solve an issue. I have implemented the same code in my editor but my problem is that metronome is not placing at the same place of pointer when i start dragging the mouse. Actually i am unable to find the mouse clicked position in timeline. Could you please explain the logic behind this?

I saw a function called getEventTime in metronome.js. Only this is using to get the mouse click location or any where else?

Please explain how you are calculating the mouse clicked position in detail.

`const getEventTime = useCallback(

    event => {
        return (event.pageX - render.padding * gridGap) / gridGap / 10 + render.beginTime;
    },
    [gridGap, render],
);`

Please tell me how it's converted into pixel from time here?

`<div
className="templet"
style={{
left: render.padding * gridGap + (drogStartTime - render.beginTime) * gridGap * 10,
width: (drogEndTime - drogStartTime) * gridGap * 10,
}}

Thanks,

导出的vtt再导入有问题

Nice to have ctrl+z, ctrl + y (or ctrl + shift+ z) functionality.

I would like to contribute to this project. Are there any contribution guide?

Hi @zhw2590582 ,
I congratulate you on the project.

After adding the translation, I noticed this happens:

The text should have a little margin on the sides, or be a little more central.

zhw2590582 您好：
我发现了 https://subplayer.js.org 一个小bug。
即某些【特定的音频】波形会有不正确的情况，描述如下。

具体表现为：
● 比如在第 10 秒处存在波形（波峰），但声音是延后了2秒才出现的。
● 换个说法：在 12 秒处播出了声音，但在之前第 10 秒处就出现了波形。
● 由此导致声音和波形无法对应，
如图

然后我做了一个考证：
● 用其它几个工具校验了一下波形的正确性（见下图），发现字幕和音频在其它软件中能正常对应。只在我们 subplayer 正确不能对应，即上文提到的声音比波形慢半拍。
● 怀疑音频有特殊性，用软件工具做了格式转换（如 ffmpeg.js 和格式工厂） 比如把它转为 aac, ogg, mp3 然后把转换之后的文件导入 subplayer 后波形和字幕就对应了。

▼图

▼音频
新概念.zip

How could I load an SRT file from a URL instead of asking user to open with file picker?

making any changes to the example demo should not be saved and if I refresh the page, the example demo should go again to its initial state

如题所示。好用的快捷键系统对于做字幕的效率有很大提升，熟练之后几乎不用鼠标就可以完成字幕制作。请问可以在将来的版本加入这一功能吗？

Hi @zhw2590582 ,
I noticed this thing, that when I open the console of the errors in the dimensions that are seen in the video the following problem occurs.

It's not very important, but I think it's a page size issue.

P.s.
Is the online.aimu-app.com project always yours?
Because I noticed a problem.

Dear Harvey,
There is an issue with opening some videos with the open option.

Please be kind enough to send me the code to fix this issue.
I have attached the screenshot of the issue.

Kind regards,
Indunil Sanjeewa

Uncaught ArtPlayerError: The width and height of the container cannot be 0
when I integrate subplayer into my app I get this error