├── .babelrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── __tests__ └── cassette-test.js ├── gulpfile.js ├── lib └── cassette.js ├── package.json └── src └── cassette.jsx /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | node_modules 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.0" 4 | - "5.0" -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [react-cassette-player](https://chadpaulson.github.io/react-cassette-player/) 2 | 3 | [![Build Status](https://travis-ci.org/chadpaulson/react-cassette-player.svg?branch=master)](https://travis-ci.org/chadpaulson/react-cassette-player) 4 | 5 | [![screenshot](https://github.com/chadpaulson/react-cassette-player/raw/gh-pages/img/screenshot.png)](https://chadpaulson.github.io/react-cassette-player/) 6 | 7 | Demo @ https://chadpaulson.github.io/react-cassette-player/ 8 | 9 | ## Install 10 | 11 | ``` 12 | npm install react-cassette-player 13 | ``` 14 | 15 | ## Basic Usage 16 | 17 | ```javascript 18 | var React = require('react') 19 | var ReactDOM = require('react-dom') 20 | var Cassette = require('react-cassette-player') 21 | 22 | var audio = 'https://wavves.s3.amazonaws.com/la.mp3' 23 | ReactDOM.render(, document.body) 24 | ``` 25 | 26 | ## Props 27 | 28 | | | | 29 | |----------------|----------------------| 30 | | src | Required: URI of HTML5 audio resource you wish to play. | 31 | | preload | Optional: `metadata` (default), `auto` or `none`. | 32 | | mimeType | Optional: `audio/mpeg` (default), `audio/ogg` or `audio/wav` string. | 33 | | cassetteColor | Optional: RGB or HEX string. | 34 | | labelColor | Optional: RGB or HEX string. | 35 | | tapeColor | Optional: RGB or HEX string. | 36 | | controlsColor | Optional: RGB or HEX string. | 37 | | containerClass | Optional: `react-cassette-player` (default) string. | 38 | | scaleMethod | Optional: `meet` (default) or `slice` string. See [preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio). | 39 | 40 | All props can be referenced in the [demo source](https://github.com/chadpaulson/react-cassette-player/tree/gh-pages). Don't hesitate to [ask questions](https://github.com/chadpaulson/react-cassette-player/issues/new). 41 | 42 | ## Attribution 43 | 44 | SVG icons used by react-cassette-player are licensed [Creative Commons (CC BY 3.0)](https://creativecommons.org/licenses/by/3.0/us/) and must be purchased by the [Noun Project](http://thenounproject.com). Otherwise, you must add the following attribution to your project. 45 | 46 | > [Play](http://thenounproject.com/term/play/15109/) icon designed by [Björn Andersson](http://thenounproject.com/bjorna1/) from the Noun Project. 47 | > [Cassette](http://thenounproject.com/term/cassette/37972/) icon designed by [Daniel Llamas Soto](http://thenounproject.com/yamasoto/) from the Noun Project. 48 | 49 | ## Music 50 | 51 | [Demo audio](https://chadpaulson.github.io/react-cassette-player/) courtesy of [Echo Nest Labs](http://static.echonest.com/labs/). 52 | 53 | ## Motivation 54 | 55 | Desire to build a functional [Noun](http://thenounproject.com) while experimenting with React SVG support. [Feedback and contributions](https://github.com/chadpaulson/react-cassette-player/issues/new) are welcome. 56 | -------------------------------------------------------------------------------- /__tests__/cassette-test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | jest.autoMockOff(); 4 | var React, TestUtils, CassetteComponent, audio; 5 | 6 | describe('Cassette', function() { 7 | 8 | beforeEach(function() { 9 | React = require('react'); 10 | TestUtils = require('react-addons-test-utils'); 11 | CassetteComponent = require('../lib/cassette'); 12 | audio = 'http://static.echonest.com/audio2/Advisory_Committee.mp3'; 13 | }); 14 | 15 | it('renders a default cassette', function() { 16 | var cassette = TestUtils.renderIntoDocument( 17 | 18 | ); 19 | // Verify the source audio and default settings 20 | var source = TestUtils.findRenderedDOMComponentWithTag(cassette, 'source'); 21 | expect(source.getAttribute('src')).toEqual(audio); 22 | expect(source.getAttribute('type')).toEqual('audio/mpeg'); 23 | // Verify SVG attributes 24 | var svg = TestUtils.findRenderedDOMComponentWithTag(cassette, 'svg'); 25 | expect(svg.children[0].children[1].getAttribute('fill')).toEqual('#3d9ee2'); 26 | expect(svg.children[1].lastChild.getAttribute('fill')).toEqual('#191308'); 27 | }); 28 | 29 | it('renders a custom cassette', function() { 30 | var cassette = TestUtils.renderIntoDocument( 31 | 32 | ); 33 | // Verify the source audio and custom settings 34 | var source = TestUtils.findRenderedDOMComponentWithTag(cassette, 'source'); 35 | expect(source.getAttribute('src')).toEqual(audio); 36 | expect(source.getAttribute('type')).toEqual('audio/mpeg'); 37 | // Verify SVG attributes 38 | var svg = TestUtils.findRenderedDOMComponentWithTag(cassette, 'svg'); 39 | expect(svg.firstChild.firstChild.getAttribute('fill')).toEqual('#7A8867'); 40 | expect(svg.firstChild.children[1].getAttribute('fill')).toEqual('#D0CAAA'); 41 | expect(svg.children[1].lastChild.getAttribute('fill')).toEqual('#777'); 42 | }); 43 | 44 | }); 45 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var plugins = require('gulp-load-plugins')(); 5 | 6 | 7 | gulp.task('clean', function(done) { 8 | return gulp.src('lib/cassette.js', 9 | {read:false}).pipe(plugins.clean()); 10 | }); 11 | 12 | gulp.task('buildjs', ['clean'], function() { 13 | return gulp.src('src/cassette.jsx').pipe(plugins.react()).pipe(gulp.dest('lib')); 14 | }) 15 | 16 | gulp.task('default', ['buildjs']); 17 | 18 | // needs to be ran with the --harmony flag, which is included in the `npm test` script. 19 | gulp.task('jest', ['default'], function () { 20 | return gulp.src('__tests__').pipe(plugins.jest({ 21 | scriptPreprocessor: './support/preprocessor.js', 22 | unmockedModulePathPatterns: ['node_modules/react'], 23 | testPathIgnorePatterns: ['support'], 24 | moduleFileExtensions: [ 25 | 'js', 26 | 'json', 27 | 'react' 28 | ] 29 | })); 30 | }); 31 | -------------------------------------------------------------------------------- /lib/cassette.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react'); 4 | 5 | var Cassette = React.createClass({ 6 | displayName: 'Cassette', 7 | 8 | 9 | propTypes: { 10 | src: React.PropTypes.string.isRequired, 11 | preload: React.PropTypes.string, 12 | mimeType: React.PropTypes.string, 13 | labelColor: React.PropTypes.string, 14 | tapeColor: React.PropTypes.string, 15 | cassetteColor: React.PropTypes.string, 16 | controlsColor: React.PropTypes.string, 17 | containerClass: React.PropTypes.string, 18 | scaleMethod: React.PropTypes.string 19 | }, 20 | 21 | getDefaultProps: function () { 22 | return { 23 | preload: 'metadata', 24 | mimeType: 'audio/mpeg', 25 | labelColor: '#3d9ee2', 26 | tapeColor: '#191308', 27 | cassetteColor: '#333', 28 | controlsColor: '#999', 29 | containerClass: 'react-cassette-player', 30 | scaleMethod: 'meet' 31 | }; 32 | }, 33 | 34 | getInitialState: function () { 35 | return { 36 | lt: 7.6, 37 | rt: 0, 38 | playing: false, 39 | canPlay: false 40 | }; 41 | }, 42 | 43 | componentDidMount: function () { 44 | var playerElement = this.refs.player; 45 | if (this.props.preload === 'none') { 46 | this.audioReady(); 47 | } else { 48 | playerElement.addEventListener('canplay', this.audioReady); 49 | } 50 | playerElement.addEventListener('ended', this.audioEnded); 51 | playerElement.addEventListener('timeupdate', this.audioUpdate); 52 | playerElement.addEventListener('pause', this.audioPause); 53 | }, 54 | 55 | componentWillReceiveProps: function (nextProps) { 56 | if (this.props.src !== nextProps.src) { 57 | this.audioPause(); 58 | } 59 | }, 60 | 61 | componentDidUpdate: function (prevProps, prevState) { 62 | if (prevProps.src !== this.props.src) { 63 | this.audioLoad(); 64 | this.audioPlay(); 65 | } 66 | }, 67 | 68 | audioReady: function () { 69 | this.setState({ 70 | canPlay: true 71 | }); 72 | }, 73 | 74 | audioPlay: function () { 75 | try { 76 | var audioElements = document.getElementsByTagName('audio'); 77 | for (var i = 0; i < audioElements.length; i++) { 78 | audioElements[i].pause(); 79 | } 80 | } catch (e) {} 81 | this.refs.player.play(); 82 | this.setState({ 83 | playing: true 84 | }); 85 | }, 86 | 87 | audioPause: function () { 88 | this.refs.player.pause(); 89 | this.setState({ 90 | playing: false 91 | }); 92 | }, 93 | 94 | audioLoad: function () { 95 | this.refs.player.load(); 96 | this.setState({ 97 | lt: 7.6, 98 | rt: 0, 99 | playing: false, 100 | canPlay: false 101 | }); 102 | }, 103 | 104 | audioUpdate: function () { 105 | var playerElement = this.refs.player; 106 | var rt = playerElement.currentTime / playerElement.duration; 107 | var tapeLeft = 7.6 * (1 - rt); 108 | var tapeRight = 7.6 - tapeLeft; 109 | if (tapeLeft < 0.07) { 110 | tapeLeft = 0.07; 111 | } 112 | this.setState({ 113 | lt: tapeLeft, 114 | rt: tapeRight 115 | }); 116 | }, 117 | 118 | audioEnded: function () { 119 | this.setState({ 120 | playing: false 121 | }); 122 | }, 123 | 124 | togglePlayPause: function () { 125 | if (this.state.canPlay) { 126 | if (this.state.playing) { 127 | this.audioPause(); 128 | } else { 129 | this.audioPlay(); 130 | } 131 | } 132 | }, 133 | 134 | render: function () { 135 | var scaleMethod = "xMidYMid " + this.props.scaleMethod; 136 | var ls = "M40.849,49.944 h" + this.state.lt + " c0.243-1.207,0.367-2.438,0.367-3.669 c0-1.339-0.146-2.676-0.435-3.984 h-" + (this.state.lt - 0.06) + " V49.944 z"; 137 | if (this.state.rt >= 0.07) { 138 | var rs = "M40.849,49.944 h" + this.state.rt + " c0.243-1.207,0.367-2.438,0.367-3.669 c0-1.339-0.146-2.676-0.435-3.984 h-" + (this.state.rt - 0.06) + " V49.944 z"; 139 | var rightSpool = React.createElement('path', { fill: this.props.tapeColor, d: rs, transform: 'translate(100, 0) scale(-1, 1)' }); 140 | } else { 141 | var rightSpool = null; 142 | } 143 | if (this.state.playing) { 144 | var playControls = React.createElement( 145 | 'g', 146 | { transform: 'scale(0.14) translate(285,465)' }, 147 | React.createElement('rect', { fill: this.props.controlsColor, x: '50.927', y: '28.349', width: '10.715', height: '42.863' }), 148 | React.createElement('rect', { fill: this.props.controlsColor, x: '72.359', y: '28.349', width: '10.718', height: '42.863' }) 149 | ); 150 | } else if (!this.state.canPlay) { 151 | var playControls = null; 152 | } else { 153 | var playControls = React.createElement( 154 | 'g', 155 | { transform: 'scale(0.14) translate(325,465)' }, 156 | React.createElement('path', { fill: this.props.controlsColor, d: 'M16.785,27.729c-1.745-0.816-3.862-1.089-3.862,1.617v40.985c0,2.498,1.909,2.844,3.874,1.685l27.77-19.994 c2.093-1.537,1.419-3.089-0.179-4.405L16.785,27.729z' }) 157 | ); 158 | } 159 | return React.createElement( 160 | 'div', 161 | { className: this.props.containerClass }, 162 | React.createElement( 163 | 'audio', 164 | { ref: 'player', preload: this.props.preload }, 165 | React.createElement('source', { src: this.props.src, type: this.props.mimeType }) 166 | ), 167 | React.createElement( 168 | 'svg', 169 | { onClick: this.togglePlayPause, x: '0px', y: '0px', width: '100%', height: '100%', viewBox: '0 0 100 100', preserveAspectRatio: scaleMethod }, 170 | React.createElement( 171 | 'g', 172 | null, 173 | React.createElement('polygon', { fill: this.props.cassetteColor, points: '23.034,66.621 20.613,78.02 79.387,78.02 76.965,66.621' }), 174 | React.createElement('path', { fill: this.props.labelColor, d: 'M86.225,25.851h-72.45c-1.667,0-3.024,1.356-3.024,3.023v29.189c0,1.666,1.356,3.023,3.024,3.023h72.45 c1.668,0,3.023-1.357,3.023-3.023V28.874C89.248,27.207,87.893,25.851,86.225,25.851z M30.769,52.279 c-3.205,0-5.803-2.597-5.803-5.802s2.598-5.803,5.803-5.803c3.205,0,5.803,2.598,5.803,5.803S33.973,52.279,30.769,52.279z M60.234,51.023H39.77V41.21h20.465V51.023z M69.235,52.279c-3.205,0-5.803-2.597-5.803-5.802s2.598-5.803,5.803-5.803 s5.803,2.598,5.803,5.803S72.44,52.279,69.235,52.279z' }), 175 | React.createElement('path', { fill: this.props.cassetteColor, d: 'M91.399,21.98H8.6c-1.988,0-3.6,1.612-3.6,3.6v48.84c0,1.988,1.612,3.6,3.6,3.6h9.805l2.88-13.561h57.43 l2.88,13.561h9.805c1.988,0,3.601-1.611,3.601-3.6V25.58C95,23.592,93.388,21.98,91.399,21.98z M90.328,58.062 c0,2.262-1.841,4.102-4.104,4.102h-72.45c-2.263,0-4.104-1.84-4.104-4.102V28.874c0-2.262,1.841-4.103,4.104-4.103h72.45 c2.263,0,4.104,1.841,4.104,4.103V58.062z' }) 176 | ), 177 | React.createElement( 178 | 'g', 179 | null, 180 | React.createElement('path', { fill: this.props.tapeColor, d: ls }), 181 | rightSpool 182 | ), 183 | playControls 184 | ) 185 | ); 186 | } 187 | }); 188 | 189 | module.exports = Cassette; 190 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-cassette-player", 3 | "version": "1.1.2", 4 | "description": "Simple ReactJS HTML5 audio player component built with SVG icons from The Noun Project.", 5 | "main": "lib/cassette.js", 6 | "scripts": { 7 | "test": "jest", 8 | "build": "babel src/cassette.jsx -o lib/cassette.js", 9 | "pretest": "npm run-script build" 10 | }, 11 | "engines": { 12 | "node": ">=0.10.33" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/chadpaulson/react-cassette-player.git" 17 | }, 18 | "keywords": [ 19 | "react-component", 20 | "svg", 21 | "html5 audio", 22 | "html5", 23 | "audio", 24 | "mp3", 25 | "ogg", 26 | "wav", 27 | "media", 28 | "player", 29 | "cassette", 30 | "isomorphic", 31 | "react", 32 | "reactjs" 33 | ], 34 | "author": "Chad Paulson (http://chadpaulson.com/)", 35 | "license": "GPLv2", 36 | "bugs": { 37 | "url": "https://github.com/chadpaulson/react-cassette-player/issues" 38 | }, 39 | "homepage": "https://github.com/chadpaulson/react-cassette-player", 40 | "peerDependencies": { 41 | "react": "^15.0.0" 42 | }, 43 | "devDependencies": { 44 | "babel-jest": "^10.0.1", 45 | "babel-cli": "^6.7.5", 46 | "babel-preset-react": "^6.5.0", 47 | "jest-cli": "^0.10.0", 48 | "react": "^15.0.0", 49 | "react-addons-test-utils": "^15.0.0" 50 | }, 51 | "jest": { 52 | "scriptPreprocessor": "/node_modules/babel-jest", 53 | "testFileExtensions": ["es6", "js"], 54 | "moduleFileExtensions": ["js", "json", "es6"] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/cassette.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react'); 4 | 5 | 6 | var Cassette = React.createClass({ 7 | 8 | propTypes: { 9 | src: React.PropTypes.string.isRequired, 10 | preload: React.PropTypes.string, 11 | mimeType: React.PropTypes.string, 12 | labelColor: React.PropTypes.string, 13 | tapeColor: React.PropTypes.string, 14 | cassetteColor: React.PropTypes.string, 15 | controlsColor: React.PropTypes.string, 16 | containerClass: React.PropTypes.string, 17 | scaleMethod: React.PropTypes.string 18 | }, 19 | 20 | getDefaultProps: function() { 21 | return { 22 | preload: 'metadata', 23 | mimeType: 'audio/mpeg', 24 | labelColor: '#3d9ee2', 25 | tapeColor: '#191308', 26 | cassetteColor: '#333', 27 | controlsColor: '#999', 28 | containerClass: 'react-cassette-player', 29 | scaleMethod: 'meet' 30 | } 31 | }, 32 | 33 | getInitialState: function() { 34 | return { 35 | lt:7.6, 36 | rt:0, 37 | playing: false, 38 | canPlay: false 39 | } 40 | }, 41 | 42 | componentDidMount: function() { 43 | var playerElement = this.refs.player; 44 | if(this.props.preload === 'none') { 45 | this.audioReady(); 46 | } else { 47 | playerElement.addEventListener('canplay', this.audioReady); 48 | } 49 | playerElement.addEventListener('ended', this.audioEnded); 50 | playerElement.addEventListener('timeupdate', this.audioUpdate); 51 | playerElement.addEventListener('pause', this.audioPause); 52 | }, 53 | 54 | componentWillReceiveProps: function(nextProps) { 55 | if(this.props.src !== nextProps.src) { 56 | this.audioPause(); 57 | } 58 | }, 59 | 60 | componentDidUpdate: function(prevProps, prevState) { 61 | if(prevProps.src !== this.props.src) { 62 | this.audioLoad(); 63 | this.audioPlay(); 64 | } 65 | }, 66 | 67 | audioReady: function() { 68 | this.setState({ 69 | canPlay: true 70 | }); 71 | }, 72 | 73 | audioPlay: function() { 74 | try { 75 | var audioElements = document.getElementsByTagName('audio'); 76 | for(var i = 0; i < audioElements.length; i++) { 77 | audioElements[i].pause(); 78 | } 79 | } catch(e) {} 80 | this.refs.player.play(); 81 | this.setState({ 82 | playing: true 83 | }); 84 | }, 85 | 86 | audioPause: function() { 87 | this.refs.player.pause(); 88 | this.setState({ 89 | playing: false 90 | }); 91 | }, 92 | 93 | audioLoad: function() { 94 | this.refs.player.load(); 95 | this.setState({ 96 | lt:7.6, 97 | rt:0, 98 | playing: false, 99 | canPlay: false 100 | }); 101 | }, 102 | 103 | audioUpdate: function() { 104 | var playerElement = this.refs.player; 105 | var rt = playerElement.currentTime / playerElement.duration; 106 | var tapeLeft = 7.6 * (1 - rt); 107 | var tapeRight = 7.6 - tapeLeft; 108 | if(tapeLeft < 0.07) { 109 | tapeLeft = 0.07; 110 | } 111 | this.setState({ 112 | lt:tapeLeft, 113 | rt:tapeRight 114 | }); 115 | }, 116 | 117 | audioEnded: function() { 118 | this.setState({ 119 | playing: false 120 | }); 121 | }, 122 | 123 | togglePlayPause: function() { 124 | if(this.state.canPlay) { 125 | if(this.state.playing) { 126 | this.audioPause(); 127 | } else { 128 | this.audioPlay(); 129 | } 130 | } 131 | }, 132 | 133 | render: function() { 134 | var scaleMethod = "xMidYMid " + this.props.scaleMethod; 135 | var ls = "M40.849,49.944 h" + this.state.lt + " c0.243-1.207,0.367-2.438,0.367-3.669 c0-1.339-0.146-2.676-0.435-3.984 h-" + (this.state.lt - 0.06) + " V49.944 z"; 136 | if(this.state.rt >= 0.07) { 137 | var rs = "M40.849,49.944 h" + this.state.rt + " c0.243-1.207,0.367-2.438,0.367-3.669 c0-1.339-0.146-2.676-0.435-3.984 h-" + (this.state.rt - 0.06) + " V49.944 z"; 138 | var rightSpool = ; 139 | } else { 140 | var rightSpool = null; 141 | } 142 | if(this.state.playing) { 143 | var playControls = ( 144 | 145 | 146 | 147 | 148 | ); 149 | } else if(!this.state.canPlay) { 150 | var playControls = null; 151 | } else { 152 | var playControls = ( 153 | 154 | 155 | 156 | ); 157 | } 158 | return ( 159 |
160 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | {rightSpool} 172 | 173 | {playControls} 174 | 175 |
176 | ); 177 | } 178 | }); 179 | 180 | 181 | module.exports = Cassette; 182 | --------------------------------------------------------------------------------