Deboracgs commented on issue #265: Can't seem to get Cordova Media to work in Capacitor & Ionic React URL: https://github.com/apache/cordova-plugin-media/issues/265#issuecomment-582990982 > Thank you for your input Deboracgs! > > I ended up moving away from Ionic for the current project after reviewing the state of capacitor vs. cordova plugin, the lack of documentation and overall community activity I no longer have confidence in the technology. I managed to get most of my requirements done with Flutter which has much better documentation too. > > I am still curios though, how did you end up implementing the code on the React side? Maybe this will help future users understand the implementation better. Cheers! Hello!! below is my code, I'm using typescript ``` import React from 'react'; import { connect } from "react-redux"; import { withRouter, RouteComponentProps } from 'react-router-dom' import { BackgroundImage, BackgroundCirclesImage } from './../../components'; import { } from './../../actions'; import { Media, MediaObject, MediaOriginal } from '@ionic-native/media'; import { IonRange, IonIcon, IonButton, IonImg, isPlatform, getPlatforms } from '@ionic/react'; interface Props extends RouteComponentProps { } class PlayerPage extends React.Component<Props>{ sound: MediaObject; constructor(props: Props, sound: MediaObject) { super(props); this.sound = sound; } componentDidMount(){ this.sound = Media.create("https://www.alertweb.tech/assets/teste.mp3";); } play(){ this.sound.getCurrentPosition().then((value) => console.log("current position play ", value)) this.sound.play({playAudioWhenScreenIsLocked: true, numberOfLoops: 1}) } pause(){ this.sound.getCurrentPosition().then((value) => console.log("current position pause ", value)) this.sound.pause() } next(){ } back(){ } render() { return ( <BackgroundImage gradient="180deg, #230640 0%, #230640 100%" image={BackgroundCirclesImage}> <div className="container player-page"> <div className="row "> <div className="col s12"> <IonImg src={"https://images.prismic.io/ionicframeworkcom/fc6f762d-ebe2-4ad7-8746-233c36568907_Group+35.png?auto=compress,format&rect=0,0,280,200&w=280&h=200"} style={{ "width": "100%", "height": 200 }} /> </div> </div> <div className="row "> <div className="col s12"> <IonButton color="secondary">back</IonButton> <IonButton color="secondary" onClick={this.play.bind(this)}>play</IonButton> <IonButton color="secondary" onClick={this.pause.bind(this)}>pause</IonButton> <IonButton color="secondary">next</IonButton> </div> </div> <div className="row "> <div className="col s12"> <IonRange min={20} max={80} step={2} /> </div> </div> </div> </BackgroundImage> ); } } const mapStateToProps = ({ }) => { return {}; } export default withRouter(connect(mapStateToProps, { })(PlayerPage)); ```
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
![https://images.prismic.io/ionicframeworkcom/fc6f762d-ebe2-4ad7-8746-233c36568907_Group+35.png?auto=compress,format&rect=0,0,280,200&w=280&h=200"}](https://images.prismic.io/ionicframeworkcom/fc6f762d-ebe2-4ad7-8746-233c36568907_Group+35.png?auto=compress,format&rect=0,0,280,200&w=280&h=200"}){kind=link}