Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/magic-akari/lrc-maker

歌词滚动姬｜可能是你所能见到的最好用的歌词制作工具
https://github.com/magic-akari/lrc-maker

lrc lrc-maker lrc-online lyrics ncm qmc react react-hooks typescript

Last synced: about 10 hours ago
JSON representation

歌词滚动姬｜可能是你所能见到的最好用的歌词制作工具

Host: GitHub
URL: https://github.com/magic-akari/lrc-maker
Owner: magic-akari
License: mit
Created: 2017-02-19T14:09:21.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-04-30T00:07:01.000Z (7 months ago)
Last Synced: 2024-05-02T05:14:25.564Z (7 months ago)
Topics: lrc, lrc-maker, lrc-online, lyrics, ncm, qmc, react, react-hooks, typescript
Language: TypeScript
Homepage: https://lrc-maker.github.io
Size: 2.73 MB
Stars: 779
Watchers: 10
Forks: 88
Open Issues: 22
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        


    

        

    





[English](./README.md) · [中文](./README-zh.md)



# [LRC Maker][lrc maker] · [![Build](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml/badge.svg)](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml)

## What is this

This is a tool for creating scrolling lrc files, which refers to text with time tags.

## Why lrc-maker

I'm not satisfied with the existing tools, they can't be used across platforms. So I have created one by myself.

## How to use

Click [lrc-maker][lrc maker] to start. You can add the link to browser bookmark. Drag and drop the file in the page to load it and use the arrow key and space key to insert the timestamp.

Development branch links:

- https://magic-akari.github.io/lrc-maker/

- https://lrc-maker.vercel.app/

## Hotkeys

|                             key                             |         function         |

| :---------------------------------------------------------: | :----------------------: |

|                      space                       |  insert time stamp tag   |

|   backspace / delete / ⌫   |  remove time stamp tag   |

| ctrlenter↵ / ⌘↩ |       play / pause       |

|                 ← / A                 | step backward 5 seconds  |

|                 → / D                 |  step forward 5 seconds  |

|         ↑ / W / J          |   select previous line   |

|         ↓ / S / K          |     select next line     |

|                 - / +                 | adjust selected time tag |

|   ctrl↑ / ⌘↑    |  speed up playback rate  |

|   ctrl↓ / ⌘↓    | speed down playback rate |

|                        R                         |   reset playback rate    |

## Compatibility

The most modern browsers are supported. The current version uses a lot of modern browser APIs to improve performance and improve the user experience. This project uses the ES Module to load the script code, which means that the browser version should meet the following requirements.

| browser | version |

| :------ | :------ |

| EDGE    | >= 16   |

| Firefox | >= 60   |

| Chrome  | >= 61   |

| Safari  | >= 11   |

| ios_saf | >= 11   |



The current version of Edge should be supported theoretically, but there are unexplained reasons for the code to not run after loading. This problem is left to be observed after the Edge with the V8 kernel is released.



Limited support for EDGE browsers.

The browsers which do not have ES Module support will load the fallback script. Note: The fallback is not tested. The old browsers may encounter CSS layout confusion.

Ancient browsers such as IE are no longer supported. If you are an ancient browser user, it is better to use [the old version][version 3.x] of this project.

## Development

If you want to run this project on your computer locally, follow the tips.

```bash

# clone this repo

git clone https://github.com/magic-akari/lrc-maker.git

cd lrc-maker

# install dependencies

npm i

# build

npm run build

# or build with watch mode

npm start

```

## Deployment in Production

After building (`npm run build`), the `build` folder is the static website files.

You can deploy it to any CDN or static file server.

You can also build a docker image using the `Dockerfile` at the root of this repo.

It runs the build and give you a minimal nginx image.

```bash

# build image

docker build -t lrc-maker .

# create a container and serve at port 8080

docker run -d -p 8080:80 lrc-maker

```

## Star this project :star:

If you like give us a star :star: Also share this project to help more people.

---

[lrc maker]: https://lrc-maker.github.io

[version 3.x]: https://lrc-maker.github.io/3.x