Preview

├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .stylelintignore ├── .stylelintrc.js ├── README.md ├── abc.json ├── build.json ├── demo ├── basic-usage.md ├── meter-width.md ├── meters-with-caps.md ├── meters-with-gradient-colors.md └── play-in-silent.md ├── docs ├── index.css ├── index.html └── index.js ├── jest.config.js ├── package.json ├── pnpm-lock.yaml ├── src ├── index.tsx ├── types.d.ts └── utils.ts ├── test ├── index.test.jsx └── setupTests.js └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | # 忽略目录 2 | build/ 3 | node_modules/ 4 | **/*-min.js 5 | **/*.min.js 6 | coverage/ 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const { getESLintConfig } = require('@iceworks/spec'); 2 | 3 | module.exports = getESLintConfig('react-ts', { 4 | env: { 5 | jest: true 6 | }, 7 | }); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # production 7 | dist/ 8 | tmp/ 9 | lib/ 10 | es/ 11 | 12 | # misc 13 | .idea/ 14 | .happypack 15 | .DS_Store 16 | *.swp 17 | *.dia~ 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | **/*-min.css 4 | **/*.min.css 5 | coverage/ 6 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | const { getStylelintConfig } = require('@iceworks/spec'); 2 | 3 | module.exports = getStylelintConfig('react'); 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Audio Spectrum 2 | > An audio spectrum visualizer for react. 3 | 4 | ![](https://hukepublicbucket.oss-cn-hangzhou.aliyuncs.com/react-audio-spectrum/react-audio-spectrum-demo.gif) 5 | ## Live Demo 6 | > https://hu-ke.github.io/react-audio-spectrum/ 7 | 8 | ## Getting Started 9 | ``` 10 |

15 | 31 | ``` 32 | ### you can also pass audio element to the component 33 | ``` 34 | this.audioEle = new Audio('path/to/your/song.mp3) 35 | 41 | ``` 42 | if you use both `audioId` and `audioEle` props, the component will ignore `audioEle`. 43 | ### How to fix `CORS` issue? 44 | if you encounter the console error like: `MediaElementAudioSource outputs zeroes due to CORS access restrictions` That means your web application attempts to access resources (like MP3 files) from a different origin (domain, protocol, or port) without the appropriate CORS headers being set by the server hosting the resource. Here is the nginx sample config to resolve CORS errors: 45 | ```bash 46 | location / { 47 | add_header 'Access-Control-Allow-Origin' '*'; 48 | } 49 | ``` 50 | Or, if you are specifying allowed origins: 51 | ```bash 52 | location / { 53 | add_header 'Access-Control-Allow-Origin' 'https://your-website.com'; 54 | } 55 | ``` 56 | Further more, you need to add the `crossOrigin` attribute to your `audio` element: 57 | ``` 58 |