<script src="https://unpkg.com/rolling-subtitle@2.0.0/rolling-subtitle.js"></script>

<link rel="stylesheet" href="https://unpkg.com/rolling-subtitle@2.0.0/rolling-subtitle.css">

$ npm install rolling-subtitle

import RollingSubtitle from 'path/to/rolling-subtitle';

const RollingSubtitleClass = require("path/to/rolling-subtitle");

var subtitle = RollingSubtitle.init(text, options = {}, parent);

text：字幕文本（必要参数）

options：字幕配置（可选参数）

parent：字幕容器ID或DOM元素（可选参数）

subtitle.play(speed = 1);

speed：字幕滚动播放的速度（像素/帧）

subtitle.stop();

subtitle.playOnce(speed = 1);

speed：字幕滚动播放的速度（像素/帧）

subtitle.destroy();

subtitle.getElement();

字幕宽度

字幕高度

字幕背景色

字幕文本颜色

字幕字号

top = true 顶部字幕模式

bottom = true 底部字幕模式

{ width: '600px', height: '60px', bgColor: '#f0f0f0', color: '#d40000', fontSize: '20px', bottom: true }

可以将本项目用于直播场景，用顶部字幕模式或底部字幕模式滚动显示字幕。

本项目可以将字幕横向滚动显示。所有的字幕文本均不会换行。

如果文本过长而显示页面的空间有限，那么滚动显示文本是一个不错的选择。

@misc{CNOCTAVE2025, author = {Yu Hongbo, }, title = {rolling-subtitle}, year = {2025}, howpublished = {\url{https://github.com/CNOCTAVE/rolling-subtitle}}, }

@techreport{CNOCTAVE2025, author = {Yu Hongbo, }, title = {rolling-subtitle Document}, institution = {BA DU XIN SHANG}, year = {2025}, number = {16}, month = {6}, url = {https://cnoctave.github.io/rolling-subtitle/index.html}, urldate = {2025-06-16}, }

@article{https://doi.org/10.31224/4716, doi = {10.31224/4716}, url = {https://engrxiv.org/preprint/view/4716}, author = {Yu Hongbo, }, keywords = {CNOCTAVE, rolling-subtitle, browser-based, rolling subtitles, live streaming, web development}, title = {rolling-subtitle: A Browser-Based Rolling Subtitle Solution}, publisher = {engrxiv}, year = {2025}, copyright = {Creative Commons Attribution 4.0 International} }