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-582948726 > I am currently trying to get the plug-in to work with capacitor and Ionic react. > > First, I've installed the plug-in as suggested running the following commands described on this help page: https://capacitor.ionicframework.com/docs/cordova/using-cordova-plugins/ > > ``` > npm install @ionic-native/media > npm install cordova-plugin-media > npx cap sync > ``` > > I am then including the plugin within my page script: > > ``` > import { Plugins } from '@capacitor/core'; > import { Media, MediaObject } from '@ionic-native/media'; > ... > const Library: React.FC = () => { > const playAudio = async () => { > > console.log("play request triggered"); > // const media_item = Media.create(testaudio); > const testaudio = "https://link-to-audio-file.mp3";; > const file: MediaObject = Media.create(testaudio); > > // to listen to plugin events: > file.onStatusUpdate.subscribe(status => console.log(status)); // fires when file status changes > > file.onSuccess.subscribe(() => console.log('Action is successful')); > > file.onError.subscribe(error => console.log('Error!', error)); > > // play the file > file.play(); > console.log(file); > > > } > // code not related to the issue > const [items, setItems] = React.useState([]); > React.useEffect(() => { > sendGetRequest().then( > data => setItems(data.products) > ); > > }, []); > > return ( > <IonPage> > <IonHeader> > <IonToolbar> > <IonTitle>My Music</IonTitle> > </IonToolbar> > </IonHeader> > <IonContent> > <IonRow> > { > items.map(item => { > > return ( > <IonCol size="12"> > <IonCard> > <IonImg src={item['info']['thumbnail']} /> > <IonCardHeader> > <IonCardSubtitle>Audio Length</IonCardSubtitle> > <IonCardTitle>{item['info']['title']}</IonCardTitle> > </IonCardHeader> > <IonCardContent> > {item['info']['content']} > > </IonCardContent> > > <IonItem routerLink="/library/details" > > <IonIcon icon={play} slot="start" onClick={playAudio}/> > <IonLabel> > <h2>Session starten</h2> > </IonLabel> > </IonItem> > <IonItem routerLink="/library/details"> > <IonIcon icon={heart} slot="start" /> > <IonLabel> > Für später merken > </IonLabel> > </IonItem> > </IonCard> > </IonCol> > ); > }) > } > > </IonRow> > > </IonContent> > </IonPage> > ); > }; > ``` > > Most demo code using the plugin in Ionic seems to be using Angular. I'm aware that React is still a new platform for Ionic so I'm wondering if I'm doing anything wrong or maybe it is still to early on to use it for my use case? > > Any hints are much appreciated. I got worked this in ios, but on android doesn't work. I using react too. `V/Capacitor/Plugin: To native (Cordova plugin): callbackId: INVALID, service: Media, action: startPlayingAudio, actionArgs: ["5066881b-f3cd-1584-329f-6074410a385c","teste.mp3",null] W/AudioManager: Use of stream types is deprecated for operations other than volume control See the documentation of requestAudioFocus() for what to use instead with android.media.AudioAttributes to qualify your playback use case`
---------------------------------------------------------------- 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]
