@yuhongbo1/lrc-player
Version:
play lrc file in browser
283 lines (274 loc) • 17.1 kB
HTML
<html lang="en">
<!--
Copyright 2024-2025 Yu Hongbo <yuhongbo@member.fsf.org>,
CNOCTAVE <cnoctave@qq.com>
Copying and distribution of this file, with or without modification,
are permitted in any medium without royalty provided the copyright
notice and this notice are preserved. This file is offered as-is,
without any warranty.
-->
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
<meta name="theme-color" content="#00B4FF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-TileImage" content="favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="apple-mobile-web-app-title" content="lrc-player文档">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<title>lrc-player文档</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="title" content="lrc-player文档" data-qmeta="title">
<meta property="og:title" content="lrc-player文档" data-qmeta="ogTitle">
<meta name="twitter:title" content="lrc-player文档" data-qmeta="twitterTitle">
<meta name="description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="description">
<meta property="og:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="ogDesc">
<meta name="twitter:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="twitterDesc">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<div id="q-app">
<q-layout view="hHh LpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar class="bg-primary text-white q-ny-md shadow-2">
<q-btn stretch flat label="Octave中文网" @click="goTo('http://cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="lrc-player文档" @click="scrollToTop()"></q-btn>
<q-separator dark vertical></q-separator>
<q-space></q-space>
<q-separator dark vertical></q-separator>
<q-btn-dropdown stretch flat icon="translate" label="切换文档语言">
<q-list>
<q-item clickable v-close-popup @click="goTo('index.html')">
<q-item-section>
<q-item-label>zh-CN 简体中文</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="中文版Octave文档" @click="goTo('http://docs.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="学术交流论坛" @click="goTo('http://forum.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="新闻" @click="goTo('https://octave.org/news.html')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="使用方法" @click="goTo('https://wiki.octave.org/Using_Octave')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="免费下载" @click="goTo('https://octave.org/download')"></q-btn>
</q-toolbar>
</q-header>
<q-drawer class="bg-primary" show-if-above v-model="leftDrawerOpen" side="left" bordered elevated>
<q-list class="title1 text-white bg-primary">
<q-item clickable v-ripple @click="goToID('#homepage')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
项目首页
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#cdn')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
CDN引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#npm')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
NPM安装
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#how_to_use')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
如何使用
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#live_demo')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
在线演示
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#common_examples')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
常见用例
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#references')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
引用lrc-player
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<div style="position: relative;">
<q-img src="banner0.png" spinner-color="white" style="width: 100%; height: 300px;"></q-img>
<div class="q-mx-md rainbow-text"
style="line-height: 300px; font-size: 100px; position: absolute; left: 0%; top: 0%;">lrc-player文档
</div>
</div>
<div class="container">
<div class="main">
<div class="text-h5 q-ma-md text-red-10">欢迎广大开发者将此文档翻译为其他语言。</div>
<q-btn id="homepage" class="title1 text-white bg-primary" stretch flat
label="项目首页：https://github.com/CNOCTAVE/lrc-player" @click="goTo('https://github.com/CNOCTAVE/lrc-player')"></q-btn>
<q-separator></q-separator>
<div id="cdn" class="title1 q-ma-md text-primary">CDN引入方式</div>
<div class="text-h5 q-ma-md text-red-10">必须引入lrc-player.js</div>
<p class="q-ma-md"><script src="https://unpkg.com/@yuhongbo1/lrc-player@2.0.0/lrc-player.js"></script></p>
<div class="text-h5 q-ma-md text-red-10">可选引入lrc-player.css</div>
<p class="q-ma-md"><link rel="stylesheet" href="https://unpkg.com/@yuhongbo1/lrc-player@2.0.0/lrc-player.css"></p>
<q-separator></q-separator>
<div id="npm" class="title1 q-ma-md text-primary">NPM安装</div>
<p class="q-ma-md">$ npm install @yuhongbo1/lrc-player</p>
<q-separator></q-separator>
<div id="how_to_use" class="title1 q-ma-md text-primary">如何使用</div>
<div class="text-h5 q-ma-md text-red-10">初始化LRC文件，生成与LRC文件相关的所有div</div>
<p class="q-ma-md">const player = LrcPlayer.init(lrcText);</p>
<div class="text-h5 q-ma-md text-red-10">播放LRC文件</div>
<p class="q-ma-md">player.play();</p>
<div class="text-h5 q-ma-md text-red-10">暂停播放LRC文件</div>
<p class="q-ma-md">player.pause();</p>
<div class="text-h5 q-ma-md text-red-10">继续播放LRC文件</div>
<p class="q-ma-md">player.resume();</p>
<div class="text-h5 q-ma-md text-red-10">重新播放LRC文件</div>
<p class="q-ma-md">player.replay();</p>
<div class="text-h5 q-ma-md text-red-10">删除与LRC文件相关的所有div，重置LRC文件播放状态</div>
<p class="q-ma-md">player.destroy();</p>
<div class="text-h5 q-ma-md text-red-10">设置LRC文件播放进度（秒）</div>
<p class="q-ma-md">player.setTimeSecond(seconds);</p>
<div class="text-h5 q-ma-md text-red-10">设置LRC文件播放进度（毫秒）</div>
<p class="q-ma-md">player.setTimeMillisecond(milliseconds);</p>
<q-separator></q-separator>
<div id="live_demo" class="title1 q-ma-md text-primary">在线演示</div>
<div class="text-h5 q-ma-md text-red-10">仅使用lrc-player.js，而不使用lrc-player.css</div>
<iframe src="example-no-css.html" width="100%" height="300px"></iframe>
<div class="text-h5 q-ma-md text-red-10">同时使用lrc-player.js和lrc-player.css</div>
<iframe src="example-with-css.html" width="100%" height="800px"></iframe>
<q-separator></q-separator>
<div id="common_examples" class="title1 q-ma-md text-primary">常见用例</div>
<div class="text-h5 q-ma-md text-red-10">HTML播放器</div>
<p class="q-ma-md">在HTML播放器中，可以将本项目用于歌词滚动显示。</p>
<div class="text-h5 q-ma-md text-red-10">纵向滚动显示字幕</div>
<p class="q-ma-md">本项目可以将字幕纵向滚动显示，只需要将字幕按LRC格式编写即可。</p>
<div class="text-h5 q-ma-md text-red-10">提词器</div>
<p class="q-ma-md">本项目可以用作提词器，在直播、视频录制或音频录制场景中使用。</p>
<q-separator></q-separator>
<div id="references" class="title1 q-ma-md text-primary">引用lrc-player</div>
<div class="text-h5 q-ma-md text-red-10">如果你在学术研究中涉及lrc-player，那么可以按需引用以下内容。</div>
<div class="text-h5 q-ma-md text-red-10">lrc-player源码(BibTeX)</div>
<p class="q-ma-md">@misc{CNOCTAVE2025,
author = {Yu Hongbo, },
title = {lrc-player},
year = {2025},
howpublished = {\url{https://github.com/CNOCTAVE/lrc-player}},
}</p>
<div class="text-h5 q-ma-md text-red-10">lrc-player文档(BibTeX)</div>
<p class="q-ma-md">@techreport{CNOCTAVE2025,
author = {Yu Hongbo, },
title = {lrc-player Document},
institution = {BA DU XIN SHANG},
year = {2025},
number = {16},
month = {6},
url = {https://cnoctave.github.io/lrc-player/index.html},
urldate = {2025-06-16},
}</p>
<div class="text-h5 q-ma-md text-red-10">Exploring the Functionality and Applications of lrc-player: A Browser-Based LRC File Player(BibTeX)</div>
<p class="q-ma-md">@article{https://doi.org/10.31224/4702,
doi = {10.31224/4702},
url = {https://engrxiv.org/preprint/view/4702},
author = {Yu Hongbo, },
keywords = {CNOCTAVE, Windows, Linux, open-source, Electron},
title = {Exploring the Functionality and Applications of lrc-player: A Browser-Based LRC File Player},
publisher = {engrxiv},
year = {2025},
copyright = {Creative Commons Attribution 4.0 International}
}</p>
</div>
</div>
<q-toolbar class="bg-grey-8 text-white q-my-md shadow-2">
<q-btn-dropdown stretch flat label="版权所有 ©">
<q-list>
<q-item clickable v-close-popup @click="goTo('http://cnoctave.cn')">
<q-item-section>
<q-item-label>© 2024-2025 CNOCTAVE</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="goTo('https://orcid.org/0009-0007-9436-4161')">
<q-item-section>
<q-item-label>© 2024-2025 Yu Hongbo</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="此文档受Creative Commons Attribution-NoDerivatives 4.0 International License协议保护。"
@click="goTo('https://creativecommons.org/licenses/by-nd/4.0/')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="下载此文档的源码"
@click="goTo('https://github.com/CNOCTAVE/lrc-player')"></q-btn>
</q-toolbar>
</q-page-container>
</q-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.umd.prod.js"></script>
<script>
const App = {
data() {
return {
scrollToTop() {
window.scrollTo(0, 0);
},
goTo(target) {
window.open(target, '_blank');
},
goToID(target) {
window.open(target, '_self');
},
leftDrawerOpen: true,
};
},
};
const app = Vue.createApp(App);
app.use(Quasar)
app.mount('#q-app')
</script>
<script>
hljs.highlightAll();
</script>
</body>
</html>