Hey,

Thanks for this project, this is really cool! I noticed this component would not play new audio when new props were passed to src attribute. I was able to fix it by adding:

  componentDidUpdate: function(prevProps, prevState) {
    if(prevProps.src !== this.props.src) {
      var node = this.refs.player.getDOMNode();
      node.src = this.props.src;
      node.play();
    }
  },

It's kind of hard to test for this. If you inspect element after passing new props to src the new props are there but the new audio does not play. It wasn't until I manually grabbed the node via getDOMNode, placed src on it and called .play() did it play new audio right away.

Lemme know... I'll gladly send a PR if you'd like to add this.

Good job! But I need to forward, rewind and volume controls. Thank you!

Dear Creators,

I am a beginner developer and I face some issues regarding the npm package react-cassette-player.

I installed and imported the react-cassette-player version 1.1.2 and keep on receiving the "×
TypeError: Cannot read property 'string' of undefined" error message. Tested in Google Chrome and Safari.
The line 8th is highlighted: > 8 | src: React.PropTypes.string.isRequired,
therefore I installed the npm prop-types package, but the issue still remains. Also tried with sooner versions of react-cassette-player (until 0.3.0) and prop-types (15.5.7), no success.

The package.json file looks like this:

{
"name": "mark-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"react-use-gesture": "^5.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"prop-types": "^15.5.7",
"react-cassette-player": "^0.3.0",
"react-draggable": "^3.3.2",
"react-medium-image-zoom": "^3.1.1",
"react-pose": "^4.0.8",
"react-slide-toggle": "^0.2.5",
"react-spring": "^8.0.27"
},
"proxy": "http://localhost:3000"
}

I followed the small guide in the repository and the React component looks like the following:

import React from 'react';
const Cassette = require('react-cassette-player');
//tested with saved audio file
import audio1 from '../audio/audio1.mp3';

//tested with dummy audio file from the internet
var audio = "https://geekanddummy.com/wp-content/uploads/2014/01/teaspoon-stirring-mug-of-coffee.mp3";

const Audio = () => {
return (

)
};

export default Audio;

Sorry if my question is irrelevant to this repository.
Can you please take a look at the problem and advise on the further steps or the forum I can turn to?

Many thanks in advance!

Best Regards,
Rajmund

hey chad

I am using your react-cassette-player. I am using the following code:

	<div className="home-page">
	    <Cassette src="http://localhost:9090/assets/audio/1.mp3"
	      preload="none"
	      cassetteColor="#FFFFF"
	      labelColor="#000"
	      tapeColor="#000"
	      controlsColor="#FFFF"
	      containerClass="quasi-wrap" />
	    );

now, I aim at:

• _{hiding frontend;}
• _auto-play
• _loop
• _{buttons for mute the audio}

can you provide me hints on how to do so? if those features are not yet implemented I would be happy to collaborate with doing so

Gulp or Grunt? That is the question.

Most likely Gulp.

I would like to add my own jpg or png images for each song different ones. ****