Git Product home page Git Product logo

lyricer's Introduction

Lyricer

This is a simple standalone javascript library to parse and show LRC lyric in a web page.

Usage

Include the js and css file in your page.

	<script type="text/javascript" src="lyricer.min.js"></script>
	<link rel="stylesheet" href="lyricer.min.css">

In your page, you need to create an empty div with the default id 'lyricer'. This div is to place the html lyrics.

    <div id="lyricer"></div>

In your js code, you can create a Lyricer object, provding an object of options, or leave it empty.

    var lrc = new Lyricer({"showLines": 10, "clickable": false});
    var lrc = new Lyricer();

To set lrc text, run the following method,

	lrc.setLrc(lrctext);

The main method is to move to a specific time in seconds. The following line moves the html lyrics in your page to the line when the song plays at time 100 seconds.

    lrc.move(100);

Usually, you can create a function object around the move method and bind it to the timeupdate event of an audio, for example,

    audio.addEventListener( "timeupdate", function() {
		lrc.move(audio.currentTime);
	});

When you click a line of lyrics, it will generate a 'lyricerclick' event, which can tell you the starttime of that line. This feature can be used to seek the audio via lyrics.

	window.addEventListener('lyricerclick', function(e){
	    if (e.detail.time > 0) {
	        audio.currentTime = e.detail.time;
	    }
	});

Options

Option Explaination
showLines There're 8 lines' lyrics before/after the current playing one, to change it, assgin a different value as follows.
clickable Turn on/off 'lyricerclick' feature

lyricer's People

Contributors

lusaisai avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.