5.3.4: Support lyric param 'offset' & lrc accurate mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "muse-player",
-  "version": "5.3.3",
+  "version": "5.3.4",
   "description": "Just a simple and dilligent HTML5 Audio Player written in React.",
   "main": "dist/assets/muse-player.js",
   "scripts": {

src/config/base.js

@@ -2,5 +2,5 @@
 
 // Settings configured here will be merged into the final config object.
 export default {
-	MUSE_VERSION: '5.3.3'
+	MUSE_VERSION: '5.3.4'
 }

src/containers/ControlContainer.js

@@ -1,17 +1,15 @@
 import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
 
-import {  autorun } from 'mobx';
+import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
 // icons
 import { PlayButton, PauseButton } from '../sources/icons';
 
 @observer
-export default class ControlContainer extends Component
-{
+export default class ControlContainer extends Component {
   static propTypes = {
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-      .isRequired,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     store: PropTypes.object.isRequired
   };
 
@@ -47,49 +45,65 @@ export default class ControlContainer extends Component
     if (audio.playbackRate != playRate) {
       audio.playbackRate = playRate;
     }
-  }
-  unsubscriber = undefined
+  };
+  unsubscriber = undefined;
 
   /* component life cycles */
   componentDidMount() {
+    const { accuracy } = this.props;
     this.unsubscriber = autorun(this.subscriber);
+
+    // bind audio timeupdate handler
+    if (accuracy) {
+      this.intervaler = window.setInterval(
+        this.onAudioTimeUpdate,
+        accuracy === true ? 80 : accuracy
+      );
+    } else {
+      this.audio.addEventListener('timeupdate', this.onAudioTimeUpdate);
+    }
   }
 
   componentWillUnmount() {
     this.unsubscriber();
+    if (this.intervaler) {
+      window.clearInterval(this.intervaler);
+    } else {
+      this.audio.removeEventListener('timeupdate', this.onAudioTimeUpdate);
+    }
   }
 
   /* event listeners */
   onControllerClick = () => {
     const { playerLayout } = this.props.store,
-          { store } = this.props;
+      { store } = this.props;
     if (playerLayout == 'muse-layout-landscape') {
       store.toggleDrawer();
     }
-  }
+  };
 
   onPlayBtnClick = () => {
     const { store } = this.props;
     store.togglePlay();
-  }
+  };
 
   onAudioTimeUpdate = () => {
     // synchronize play progress
     const { currentTime, duration } = this.audio,
-          { parent } = this.props;
+      { parent } = this.props;
     parent.setState({
       ...parent.state,
       currentTime: currentTime,
       duration: duration
     });
-  }
+  };
 
   onAudioEnded = (proxy, e, specialCheck = false) => {
     const { store } = this.props,
       { isLoop, currentMusicIndex, playList } = store;
 
     // check loop
-    if ((specialCheck || !isLoop) && playList.length-1 > currentMusicIndex) {
+    if ((specialCheck || !isLoop) && playList.length - 1 > currentMusicIndex) {
       setTimeout(() => store.togglePlay(false), 0);
       store.setCurrentMusic(currentMusicIndex + 1);
       setTimeout(() => store.togglePlay(true), 10);
@@ -98,53 +112,47 @@ export default class ControlContainer extends Component
     } else {
       store.playerStop();
     }
-  }
+  };
 
   onAudioError = () => {
     this.onAudioEnded(false, false, true);
-  }
+  };
 
   render() {
     const { isPlaying, playList, currentMusicIndex } = this.props.store;
     const current = playList[currentMusicIndex];
 
     return (
-      <div
-          className={ 'muse-controller' }
-          onClick={ this.onControllerClick }
-      >
+      <div className={'muse-controller'} onClick={this.onControllerClick}>
         <audio
-          preload={ 'no' }
-          ref={ ref => this.audio = ref }
-          src={ current.src }
-
-          onTimeUpdate={ this.onAudioTimeUpdate }
-          onError={ this.onAudioError }
-          onEnded={ this.onAudioEnded }
-        >
-        </audio>
-
-        <div className={ 'muse-controller__container' }>
-          <div className={ 'muse-musicDetail' } >
-            <h1 className={ 'muse-musicDetail__title' } title={ current.title }>
-              { current.title }
-
-              <small className={ 'muse-musicDetail__artist' } title={ current.artist }>
-                { current.artist }
+          preload={'no'}
+          ref={ref => (this.audio = ref)}
+          src={current.src}
+          onError={this.onAudioError}
+          onEnded={this.onAudioEnded}
+        />
+
+        <div className={'muse-controller__container'}>
+          <div className={'muse-musicDetail'}>
+            <h1 className={'muse-musicDetail__title'} title={current.title}>
+              {current.title}
+
+              <small
+                className={'muse-musicDetail__artist'}
+                title={current.artist}
+              >
+                {current.artist}
               </small>
             </h1>
           </div>
 
-          <div className={ 'muse-playControl' }>
-            <button
-              className={ 'muse-btn__play' }
-              onClick={ this.onPlayBtnClick }
-            >
-              { isPlaying ? <PauseButton /> : <PlayButton /> }
+          <div className={'muse-playControl'}>
+            <button className={'muse-btn__play'} onClick={this.onPlayBtnClick}>
+              {isPlaying ? <PauseButton /> : <PlayButton />}
             </button>
           </div>
         </div>
       </div>
     );
   }
-}
+}

src/containers/DrawerContainer.js

@@ -141,6 +141,11 @@ export default class DrawerContainer extends Component {
       key = 0;
     this.lrcRefs = []; // reset
 
+    // set lyric offset automatically
+    const offset = Number(parseFloat(lyrics.offset / 1000).toFixed(1)),
+      curOffset = this.props.store.offset;
+    this.props.store.setLyricOffset(Number(offset - curOffset));
+
     lyrics.lyric.forEach(lyric => {
       lrcComponents.push(
         <LyricItemContainer
@@ -183,10 +188,12 @@ export default class DrawerContainer extends Component {
 
     /* Todo: optimize the complexity */
     if (
+      index + 1 < refs.length &&
       current > refs[index + 1].props.timeline &&
+      index + 2 < refs.length &&
       current < refs[index + 2].props.timeline
     ) {
-      this.updateLyricContainerDOMState(index + 1);
+      this.updateLyricContainerDOMState(++index);
     } else if (index == -1 && current > refs[0].props.timeline) {
       this.updateLyricContainerDOMState(0);
     } else if (index == refs.length - 1) {
@@ -196,32 +203,35 @@ export default class DrawerContainer extends Component {
         // find prev
         for (let i = index; i >= 0; i--) {
           if (i == 0) {
-            this.updateLyricContainerDOMState(-1);
+            index = -1;
             break;
           } else if (
             current >= refs[i].props.timeline &&
             current < refs[i + 1].props.timeline
           ) {
-            this.updateLyricContainerDOMState(i);
+            index = i;
             break;
           } // else if
         } // for
+        this.updateLyricContainerDOMState(index);
       } else if (current > refs[index + 1].props.timeline) {
         for (let i = index; i < refs.length; i++) {
           if (i == refs.length) {
-            this.updateLyricContainerDOMState(refs.length);
+            index = refs.length;
             break;
           } else if (
             current >= refs[i].props.timeline &&
             refs[i + 1] &&
             current < refs[i + 1].props.timeline
           ) {
-            this.updateLyricContainerDOMState(i);
+            index = i;
             break;
           } // else if
         } // for
+        this.updateLyricContainerDOMState(index);
       } // else if
     } // end lyric progress check
+
     index = Number(this.lrcContainer.getAttribute('data-current-index'));
 
     // remove active element class