├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── example ├── .babelrc ├── files │ └── George_Gershwin_playing_Rhapsody_in_Blue.ogg ├── index.html ├── js │ └── main.jsx ├── package-lock.json ├── package.json └── webpack.config.js ├── package-lock.json ├── package.json ├── src └── index.tsx ├── test ├── fixtures │ └── turkish_march.ogg └── index.test.js ├── tsconfig.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react", 5 | [ 6 | "@babel/preset-typescript", 7 | { 8 | "isTSX": true, 9 | "allExtensions": true 10 | } 11 | ] 12 | ], 13 | "plugins": [ 14 | "@babel/plugin-proposal-class-properties", 15 | "react-hot-loader/babel" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "globals": { 4 | "document": true, 5 | }, 6 | "rules": { 7 | "jsx-a11y/media-has-caption": 0, 8 | "no-unused-expressions": [2, { "allowShortCircuit": true }], 9 | "prefer-destructuring": 0, 10 | "react/destructuring-assignment": 0 , 11 | "react/jsx-one-expression-per-line": 0 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | .DS_Store 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | example/ 3 | spec/ 4 | karma.conf.js 5 | webpack.config.js 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Justin McCandless 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Audio Player 2 | This is a light React wrapper around the HTML5 audio tag. It provides the ability to manipulate the player and listen to events through a nice React interface. 3 | 4 | ## Installation 5 | 6 | npm install --save react-audio-player 7 | 8 | Also be sure you have `react` and `react-dom` installed in your app at version 15 or above. 9 | 10 | ## Usage 11 | 12 | import ReactAudioPlayer from 'react-audio-player'; 13 | //... 14 | 19 | 20 | ### Example 21 | 22 | See the example directory for a basic working example of using this project. To run it locally, run `npm install` in the example directory and then `npm start`. 23 | 24 | ## Props 25 | 26 | ### Props - Native/React Attributes 27 | See the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) for detailed explanations of these attributes. 28 | 29 | Prop | Type | Default | Notes 30 | --- | --- | --- | --- 31 | `autoPlay` | Boolean | false | --- 32 | `children` | Element | null | --- 33 | `className` | String | *empty string* | --- 34 | `controls` | Boolean | false | --- 35 | `crossOrigin` | String | *empty string* | See [MDN's article on CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) for more about this attribute. 36 | `controlsList` | String | *empty string* | For Chrome 58+. Only available in React 15.6.2+ 37 | `id` | String | *empty string* | --- 38 | `loop` | Boolean | false | --- 39 | `muted` | Boolean | false | --- 40 | `volume` | Number | 1.0 | --- 41 | `preload` | String | 'metadata' | --- 42 | `src` | String | *empty string* | --- 43 | `style` | Object | --- | --- 44 | 45 | ### Props - Events 46 | 47 | Prop | Type | Description 48 | --- | --- | --- 49 | `listenInterval` | Number | Indicates how often to call the `onListened` prop during playback, in milliseconds. Default is 10000. 50 | `onAbort` | Function | called when unloading the audio player, like when switching to a different src file. Passed the event. 51 | `onCanPlay` | Function | called when enough of the file has been downloaded to be able to start playing. Passed the event. 52 | `onCanPlayThrough` | Function | called when enough of the file has been downloaded to play through the entire file. Passed the event. 53 | `onEnded` | Function | called when playback has finished to the end of the file. Passed the event. 54 | `onError` | Function | called when the audio tag encounters an error. Passed the event. 55 | `onListen` | Function | called every `listenInterval` milliseconds during playback. Passed the event. 56 | `onPause` | Function | called when the user pauses playback. Passed the event. 57 | `onPlay` | Function | called when the user taps play. Passed the event. 58 | `onSeeked` | Function | called when the user drags the time indicator to a new time. Passed the event. 59 | `onVolumeChanged` | Function | called when the user changes the volume, such as by dragging the volume slider | 60 | `onLoadedMetadata` | Function | called when the metadata for the given audio file has finished downloading. Passed the event. 61 | 62 | ## Advanced Usage 63 | 64 | ### Access to the audio element 65 | You can get direct access to the underlying audio element. First get a ref to ReactAudioPlayer: 66 | 67 | { this.rap = element; }} 69 | /> 70 | 71 | Then you can access the audio element like this: 72 | 73 | this.rap.audioEl 74 | 75 | This is especially useful if you need access to read-only attributes of the audio tag such as `buffered` and `played`. See the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) for more on these attributes. 76 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ], 6 | "plugins": [ 7 | "react-hot-loader/babel" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /example/files/George_Gershwin_playing_Rhapsody_in_Blue.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justinmc/react-audio-player/27b0de14b6dce16723430b42e4cfabd3af295b78/example/files/George_Gershwin_playing_Rhapsody_in_Blue.ogg -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | react-audio-player example 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /example/js/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import ReactAudioPlayer from 'react-audio-player'; 4 | 5 | ReactDOM.render( 6 | , 10 | document.querySelector('.app'), 11 | ); 12 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-audio-player-example", 3 | "version": "0.0.1", 4 | "description": "Simple example app for react-audio-player", 5 | "main": "dist/bundle.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --config webpack.config.js --progress --colors" 8 | }, 9 | "author": "Justin McCandless", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "@babel/core": "^7.9.0", 13 | "@babel/preset-env": "^7.9.5", 14 | "@babel/preset-react": "^7.9.4", 15 | "babel-loader": "^8.1.0", 16 | "eslint": "^5.16.0", 17 | "eslint-config-airbnb": "^17.1.1", 18 | "eslint-loader": "^2.2.1", 19 | "eslint-plugin-import": "^2.20.2", 20 | "eslint-plugin-jsx-a11y": "^6.2.3", 21 | "eslint-plugin-react": "^7.19.0", 22 | "file-loader": "^3.0.1", 23 | "react-dom": "^16.13.1", 24 | "react-hot-loader": "^4.12.20", 25 | "webpack": "^5.28.0", 26 | "webpack-cli": "^3.3.11", 27 | "webpack-dev-server": "^3.11.2" 28 | }, 29 | "dependencies": { 30 | "react": "^16.13.1", 31 | "react-audio-player": "^0.11.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | const PORT = 4000; 5 | 6 | module.exports = { 7 | entry: { 8 | app: [ 9 | `webpack-dev-server/client?http://0.0.0.0:${PORT}`, 10 | 'webpack/hot/only-dev-server', 11 | './js/main.jsx', 12 | ], 13 | }, 14 | output: { 15 | path: path.resolve(__dirname, 'dist'), 16 | publicPath: '/js/', 17 | filename: 'bundle.js', 18 | }, 19 | devServer: { 20 | port: PORT, 21 | hot: true, 22 | }, 23 | resolve: { 24 | extensions: ['.js', '.jsx'], 25 | }, 26 | mode: 'development', 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.jsx?$/, 31 | exclude: /(node_modules|bower_components)/, 32 | loader: 'babel-loader', 33 | }, 34 | ], 35 | }, 36 | devtool: 'source-map', 37 | plugins: [ 38 | new webpack.HotModuleReplacementPlugin(), 39 | ], 40 | }; 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-audio-player", 3 | "version": "0.17.0", 4 | "description": "A simple React wrapper for the audio tag", 5 | "main": "dist/bundle.js", 6 | "types": "dist/index.d.ts", 7 | "scripts": { 8 | "test": "jest", 9 | "build": "webpack -p", 10 | "build:d.ts": "tsc", 11 | "watch": "webpack -p --watch", 12 | "prepare": "npm run build && npm run build:d.ts", 13 | "example": "webpack-dev-server --content-base example/ --config example/webpack.config.js --progress --colors" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/justinmc/react-audio-player" 18 | }, 19 | "keywords": [ 20 | "react", 21 | "audio", 22 | "player", 23 | "wrapper", 24 | "simple" 25 | ], 26 | "author": "Justin McCandless", 27 | "license": "MIT", 28 | "peerDependencies": { 29 | "react": ">=16", 30 | "react-dom": ">=16" 31 | }, 32 | "dependencies": { 33 | "prop-types": "^15.7.2" 34 | }, 35 | "devDependencies": { 36 | "@babel/core": "^7.9.0", 37 | "@babel/plugin-proposal-class-properties": "^7.8.3", 38 | "@babel/preset-env": "^7.9.5", 39 | "@babel/preset-react": "^7.9.4", 40 | "@babel/preset-typescript": "^7.8.3", 41 | "@types/react": "^16.9.23", 42 | "babel-jest": "^25.4.0", 43 | "babel-loader": "^8.1.0", 44 | "eslint": "^5.16.0", 45 | "eslint-config-airbnb": "^17.1.1", 46 | "eslint-loader": "^2.2.1", 47 | "eslint-plugin-import": "^2.20.2", 48 | "eslint-plugin-jsx-a11y": "^6.2.3", 49 | "eslint-plugin-react": "^7.19.0", 50 | "file-loader": "^3.0.1", 51 | "jest": "^25.4.0", 52 | "react": "^16.13.1", 53 | "react-addons-test-utils": "^15.6.2", 54 | "react-dom": "^16.13.1", 55 | "react-hot-loader": "^4.12.20", 56 | "react-test-renderer": "^16.13.1", 57 | "typescript": "^3.8.3", 58 | "webpack": "^4.42.1", 59 | "webpack-cli": "^3.3.11", 60 | "webpack-dev-server": "^3.11.2" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component, ReactNode, CSSProperties } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | interface ReactAudioPlayerProps { 5 | autoPlay?: boolean 6 | children?: ReactNode 7 | className?: string 8 | controls?: boolean 9 | controlsList?: string 10 | crossOrigin?: string 11 | id?: string 12 | listenInterval?: number 13 | loop?: boolean 14 | muted?: boolean 15 | onAbort?: (e: Event) => void 16 | onCanPlay?: (e: Event) => void 17 | onCanPlayThrough?: (e: Event) => void 18 | onEnded?: (e: Event) => void 19 | onError?: (e: Event) => void 20 | onListen?: (time: number) => void 21 | onLoadedMetadata?: (e: Event) => void 22 | onPause?: (e: Event) => void 23 | onPlay?: (e: Event) => void 24 | onSeeked?: (e: Event) => void 25 | onVolumeChanged?: (e: Event) => void 26 | preload?: '' | 'none' | 'metadata' | 'auto' 27 | src?: string, // Not required b/c can use 28 | style?: CSSProperties 29 | title?: string 30 | volume: number 31 | } 32 | 33 | interface ConditionalProps { 34 | controlsList?: string 35 | [key: string]: any 36 | } 37 | 38 | class ReactAudioPlayer extends Component { 39 | static propTypes: Object 40 | 41 | static defaultProps: ReactAudioPlayerProps 42 | 43 | audioEl = React.createRef(); 44 | 45 | listenTracker?: number 46 | 47 | onError = (e: Event) => this.props.onError?.(e); 48 | onCanPlay = (e: Event) => this.props.onCanPlay?.(e); 49 | onCanPlayThrough = (e: Event) => this.props.onCanPlayThrough?.(e); 50 | onPlay = (e: Event) => { 51 | this.setListenTrack(); 52 | this.props.onPlay?.(e); 53 | } 54 | onAbort = (e: Event) => { 55 | this.clearListenTrack(); 56 | this.props.onAbort?.(e); 57 | } 58 | onEnded = (e: Event) => { 59 | this.clearListenTrack(); 60 | this.props.onEnded?.(e); 61 | } 62 | onPause = (e: Event) => { 63 | this.clearListenTrack(); 64 | this.props.onPause?.(e); 65 | } 66 | onSeeked = (e: Event) => { 67 | this.props.onSeeked?.(e); 68 | } 69 | onLoadedMetadata = (e: Event) => { 70 | this.props.onLoadedMetadata?.(e); 71 | } 72 | onVolumeChanged = (e: Event) => { 73 | this.props.onVolumeChanged?.(e); 74 | } 75 | 76 | componentDidMount() { 77 | const audio = this.audioEl.current; 78 | 79 | if (!audio) return; 80 | 81 | this.updateVolume(this.props.volume); 82 | 83 | audio.addEventListener('error', this.onError); 84 | 85 | // When enough of the file has downloaded to start playing 86 | audio.addEventListener('canplay', this.onCanPlay); 87 | 88 | // When enough of the file has downloaded to play the entire file 89 | audio.addEventListener('canplaythrough', this.onCanPlayThrough); 90 | 91 | // When audio play starts 92 | audio.addEventListener('play', this.onPlay); 93 | 94 | // When unloading the audio player (switching to another src) 95 | audio.addEventListener('abort', this.onAbort); 96 | 97 | // When the file has finished playing to the end 98 | audio.addEventListener('ended', this.onEnded); 99 | 100 | // When the user pauses playback 101 | audio.addEventListener('pause', this.onPause); 102 | 103 | // When the user drags the time indicator to a new time 104 | audio.addEventListener('seeked', this.onSeeked); 105 | 106 | audio.addEventListener('loadedmetadata', this.onLoadedMetadata); 107 | 108 | audio.addEventListener('volumechange', this.onVolumeChanged); 109 | } 110 | 111 | // Remove all event listeners 112 | componentWillUnmount() { 113 | const audio = this.audioEl.current; 114 | 115 | if (!audio) return; 116 | 117 | audio.removeEventListener('error', this.onError); 118 | 119 | // When enough of the file has downloaded to start playing 120 | audio.removeEventListener('canplay', this.onCanPlay); 121 | 122 | // When enough of the file has downloaded to play the entire file 123 | audio.removeEventListener('canplaythrough', this.onCanPlayThrough); 124 | 125 | // When audio play starts 126 | audio.removeEventListener('play', this.onPlay); 127 | 128 | // When unloading the audio player (switching to another src) 129 | audio.removeEventListener('abort', this.onAbort); 130 | 131 | // When the file has finished playing to the end 132 | audio.removeEventListener('ended', this.onEnded); 133 | 134 | // When the user pauses playback 135 | audio.removeEventListener('pause', this.onPause); 136 | 137 | // When the user drags the time indicator to a new time 138 | audio.removeEventListener('seeked', this.onSeeked); 139 | 140 | audio.removeEventListener('loadedmetadata', this.onLoadedMetadata); 141 | 142 | audio.removeEventListener('volumechange', this.onVolumeChanged); 143 | } 144 | 145 | componentDidUpdate(prevProps: ReactAudioPlayerProps) { 146 | this.updateVolume(this.props.volume); 147 | } 148 | 149 | /** 150 | * Set an interval to call props.onListen every props.listenInterval time period 151 | */ 152 | setListenTrack() { 153 | if (!this.listenTracker) { 154 | const listenInterval = this.props.listenInterval; 155 | this.listenTracker = window.setInterval(() => { 156 | this.audioEl.current && this.props.onListen?.(this.audioEl.current.currentTime); 157 | }, listenInterval); 158 | } 159 | } 160 | 161 | /** 162 | * Set the volume on the audio element from props 163 | * @param {Number} volume 164 | */ 165 | updateVolume(volume: number) { 166 | const audio = this.audioEl.current; 167 | if (audio !== null && typeof volume === 'number' && volume !== audio?.volume) { 168 | audio.volume = volume; 169 | } 170 | } 171 | 172 | /** 173 | * Clear the onListen interval 174 | */ 175 | clearListenTrack() { 176 | if (this.listenTracker) { 177 | clearInterval(this.listenTracker); 178 | delete this.listenTracker; 179 | } 180 | } 181 | 182 | render() { 183 | const incompatibilityMessage = this.props.children || ( 184 |

Your browser does not support the audio element.

185 | ); 186 | 187 | // Set controls to be true by default unless explicity stated otherwise 188 | const controls = !(this.props.controls === false); 189 | 190 | // Set lockscreen / process audio title on devices 191 | const title = this.props.title ? this.props.title : this.props.src; 192 | 193 | // Some props should only be added if specified 194 | const conditionalProps: ConditionalProps = {}; 195 | if (this.props.controlsList) { 196 | conditionalProps.controlsList = this.props.controlsList; 197 | } 198 | 199 | return ( 200 | 217 | ); 218 | } 219 | } 220 | 221 | ReactAudioPlayer.defaultProps = { 222 | autoPlay: false, 223 | children: null, 224 | className: '', 225 | controls: false, 226 | controlsList: '', 227 | id: '', 228 | listenInterval: 10000, 229 | loop: false, 230 | muted: false, 231 | onAbort: () => {}, 232 | onCanPlay: () => {}, 233 | onCanPlayThrough: () => {}, 234 | onEnded: () => {}, 235 | onError: () => {}, 236 | onListen: () => {}, 237 | onPause: () => {}, 238 | onPlay: () => {}, 239 | onSeeked: () => {}, 240 | onVolumeChanged: () => {}, 241 | onLoadedMetadata: () => {}, 242 | preload: 'metadata', 243 | style: {}, 244 | title: '', 245 | volume: 1.0, 246 | }; 247 | 248 | ReactAudioPlayer.propTypes = { 249 | autoPlay: PropTypes.bool, 250 | children: PropTypes.element, 251 | className: PropTypes.string, 252 | controls: PropTypes.bool, 253 | controlsList: PropTypes.string, 254 | crossOrigin: PropTypes.string, 255 | id: PropTypes.string, 256 | listenInterval: PropTypes.number, 257 | loop: PropTypes.bool, 258 | muted: PropTypes.bool, 259 | onAbort: PropTypes.func, 260 | onCanPlay: PropTypes.func, 261 | onCanPlayThrough: PropTypes.func, 262 | onEnded: PropTypes.func, 263 | onError: PropTypes.func, 264 | onListen: PropTypes.func, 265 | onLoadedMetadata: PropTypes.func, 266 | onPause: PropTypes.func, 267 | onPlay: PropTypes.func, 268 | onSeeked: PropTypes.func, 269 | onVolumeChanged: PropTypes.func, 270 | preload: PropTypes.oneOf(['', 'none', 'metadata', 'auto']), 271 | src: PropTypes.string, // Not required b/c can use 272 | style: PropTypes.objectOf(PropTypes.string), 273 | title: PropTypes.string, 274 | volume: PropTypes.number, 275 | }; 276 | 277 | export default ReactAudioPlayer; 278 | -------------------------------------------------------------------------------- /test/fixtures/turkish_march.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justinmc/react-audio-player/27b0de14b6dce16723430b42e4cfabd3af295b78/test/fixtures/turkish_march.ogg -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import React from 'react'; 3 | import ReactDOM, { findDOMNode, render, unmountComponentAtNode } from 'react-dom'; 4 | import ReactTestUtils from 'react-dom/test-utils'; 5 | import ReactAudioPlayer from '../src/index.tsx'; 6 | 7 | jest.useFakeTimers(); 8 | 9 | describe('ReactAudioPlayer', function() { 10 | const song = './fixtures/turkish_march.ogg'; 11 | 12 | test('renders an audio element', function() { 13 | const instance = ReactTestUtils.renderIntoDocument( 14 | 15 | ); 16 | 17 | const instanceEl = ReactDOM.findDOMNode(instance); 18 | 19 | expect(instanceEl.tagName).toBe('AUDIO'); 20 | }); 21 | 22 | test('sets the loop attribute if provided', function() { 23 | const instance = ReactTestUtils.renderIntoDocument( 24 | 28 | ); 29 | 30 | const instanceEl = ReactDOM.findDOMNode(instance); 31 | 32 | expect(instanceEl.getAttribute('loop')).not.toBe(null); 33 | }) 34 | 35 | test('sets title', function() { 36 | const instance = ReactTestUtils.renderIntoDocument( 37 | 41 | ); 42 | 43 | const instanceEl = ReactDOM.findDOMNode(instance); 44 | 45 | expect(instanceEl.getAttribute("title")).toBe("Turkish march"); 46 | }) 47 | 48 | test('receives all custom props', function() { 49 | const instance = ReactTestUtils.renderIntoDocument( 50 | 56 | ); 57 | 58 | const props = Object.keys(instance.props); 59 | 60 | expect(props).toContain('name'); 61 | expect(props).toContain('data-id'); 62 | expect(props).toContain('controlsList'); 63 | }); 64 | 65 | test('does not crash', function() { 66 | const onListen = jest.fn(); 67 | const instance = ReactTestUtils.renderIntoDocument( 68 | 72 | ); 73 | 74 | instance.setListenTrack(); 75 | 76 | ReactTestUtils.act(() => jest.advanceTimersByTime(10000)); 77 | expect(onListen).toHaveBeenCalledTimes(1); 78 | 79 | expect(instance.audioEl.current).toBeTruthy() 80 | 81 | // unmount to set audioEl.current to null 82 | unmountComponentAtNode(findDOMNode(instance).parentElement); 83 | 84 | expect(instance.audioEl.current).toBe(null); 85 | 86 | expect(() => { 87 | ReactTestUtils.act(() => jest.advanceTimersByTime(10000)) 88 | }).not.toThrow() 89 | }) 90 | }); 91 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | // "lib": [], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | "outDir": "dist", /* Redirect output structure to the directory. */ 15 | "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "composite": true, /* Enable project compilation */ 17 | // "removeComments": true, /* Do not emit comments to output. */ 18 | // "noEmit": true, /* Do not emit outputs. */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | "emitDeclarationOnly": true, /* Output declaration files only */ 23 | 24 | /* Strict Type-Checking Options */ 25 | "strict": true, /* Enable all strict type-checking options. */ 26 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 27 | "strictNullChecks": true, /* Enable strict null checks. */ 28 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 29 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 30 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 31 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 32 | 33 | /* Additional Checks */ 34 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 35 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 36 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 37 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 38 | 39 | /* Module Resolution Options */ 40 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 41 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 42 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 43 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 44 | // "typeRoots": [], /* List of folders to include type definitions from. */ 45 | // "types": [], /* Type declaration files to be included in compilation. */ 46 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 47 | // "esModuleInterop": false, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 48 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 49 | 50 | /* Source Map Options */ 51 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 52 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 53 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 54 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 55 | 56 | /* Experimental Options */ 57 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 58 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 59 | 60 | /* Advanced Options */ 61 | // "declarationDir": "lib" /* Output directory for generated declaration files. */ 62 | }, 63 | "exclude": [ 64 | "./dist", 65 | "./example" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: './src/index.tsx', 5 | output: { 6 | path: path.resolve(__dirname, 'dist'), 7 | filename: 'bundle.js', 8 | libraryTarget: 'commonjs2', 9 | }, 10 | externals: [ 11 | // Every non-relative module is external 12 | // abc -> require("abc") 13 | /^[a-z\-0-9]+$/, 14 | ], 15 | mode: 'production', 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.tsx?$/, 20 | exclude: /(node_modules|bower_components)/, 21 | loader: 'babel-loader', 22 | }, 23 | ], 24 | }, 25 | }; 26 | --------------------------------------------------------------------------------