migrate npm to yarn; add onVolumeChange; add svg style fix; add UMD

#50
#51

.eslintrc.js

@@ -10,9 +10,9 @@ module.exports = {
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:jsx-a11y/recommended',
-    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-    'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
   ],
   parserOptions: {
     sourceType: 'module',
@@ -23,13 +23,16 @@ module.exports = {
     },
   },
   rules: {
-    'prettier/prettier': [2, {
-      printWidth: 120,
-      singleQuote: true,
-      semi: false,
-      arrowParens: 'always',
-      trailingComma: 'es5'
-    }],
+    'prettier/prettier': [
+      2,
+      {
+        printWidth: 120,
+        singleQuote: true,
+        semi: false,
+        arrowParens: 'always',
+        trailingComma: 'es5',
+      },
+    ],
     'arrow-parens': [2, 'always'],
     camelcase: [2, { properties: 'never' }],
     curly: [2, 'multi-line'],
@@ -101,6 +104,7 @@ module.exports = {
     'prefer-const': 2,
     'prefer-arrow-callback': 2,
     'template-curly-spacing': [2, 'never'],
+    '@typescript-eslint/ban-ts-comment': 0,
   },
   overrides: [
     {
@@ -109,7 +113,7 @@ module.exports = {
         '@typescript-eslint/ban-ts-ignore': 0,
         '@typescript-eslint/no-empty-function': 0,
         '@typescript-eslint/explicit-function-return-type': 0,
-      }
-    }
+      },
+    },
   ],
 }

.gitignore

@@ -3,3 +3,4 @@ lib/
 es/
 react-h5-audio-player-storybook/
 coverage/
+.vscode/

README.md

@@ -26,7 +26,7 @@
 
 Live Demo: [Storybook](https://static.hanzluo.com/react-h5-audio-player-storybook/index.html?path=/docs/layouts--default-story)
 
-Website example: [hanzluo.com](https://hanzluo.com/#music) | [Code](https://github.com/lhz516/hanzluo/blob/master/src/components/home/home.js#L279)
+Try it on CodePen: [codepen.io/lhz516/pen/dyGpmgP](https://codepen.io/lhz516/pen/dyGpmgP)
 
 Supported browsers: Chrome, Firefox, Safari, Opera, Edge, IE 11
 
@@ -122,6 +122,7 @@ The `controls` attribute defaults to `false` and should never be changed to `tru
 | onClickNext            | Function (Event)  | null    | Called when click Next button |
 | onPlayError            | Function (Error)  | null    | Called when there's error invoking `audio.play()`, it captures error that `onError` won't catch |
 | onListen               | Function (Event)  | null    | Called every `listenInterval` milliseconds during playback |
+| onVolumeChange         | Function (Event)  | null    | Called when volume is changed. Get volume by `e.target.volume` |
 | onPlay                 | Function (Event)  | null    | Called when user plays the audio |
 | onPause                | Function (Event)  | null    | Called when user pauses the audio |
 | onAbort                | Function (Event)  | null    | Called when unloading the audio player, like when switching to a different src file |