react-native ios app webview plays audio muted when screen turrned off

up vote
1
down vote

favorite

I built a react-native webview app which has audio when the screen turns off the audio keep playing in android while it turned off in ios.
is there any solution ?

asked 2 days ago

rami-sf

New contributor

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
2 days ago

add a comment |

up vote
1
down vote

favorite

I built a react-native webview app which has audio when the screen turns off the audio keep playing in android while it turned off in ios.
is there any solution ?

asked 2 days ago

rami-sf

New contributor

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
2 days ago

add a comment |

up vote
1
down vote

favorite

I built a react-native webview app which has audio when the screen turns off the audio keep playing in android while it turned off in ios.
is there any solution ?

asked 2 days ago

rami-sf

New contributor

I built a react-native webview app which has audio when the screen turns off the audio keep playing in android while it turned off in ios.
is there any solution ?

android ios react-native react-native-ios

asked 2 days ago

rami-sf

New contributor

asked 2 days ago

rami-sf

New contributor

asked 2 days ago

rami-sf

New contributor

asked 2 days ago

rami-sf

asked 2 days ago

rami-sf

New contributor

rami-sf is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
2 days ago

add a comment |

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
2 days ago

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
2 days ago

add a comment |

1 Answer
1

active

oldest

votes

up vote
2
down vote

Please make sure that the Background Modes of Xcode project should be enabled.

If not enabled, go to Xcode project -> Select the target -> Capabilities section -> Background Modes -> Turn it on.

Then select Audio, AirPlay, and Picture in Picture.

enter image description here

Code:

import React, Component from 'react';
import StyleSheet, View, Button from 'react-native';
import SoundPlayer from 'react-native-sound-player';

export default class Touchables extends Component 
 constructor(props) 
 super(props);
 

 playTrack() 
 try 
 SoundPlayer.playUrl('http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')
 catch (e) 
 alert('Cannot play the file')
 console.log('cannot play the song file', e)
 
 

 render() 
 return (
 <View style=styles.container>
 <Button title="play me" onPress=this.playTrack />
 </View>
 );
 


const styles = StyleSheet.create(
 container: 
 marginTop: 100,
 ,
);

edited 2 days ago

answered 2 days ago

Sateesh

1,077513

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

rami-sf is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53237714%2freact-native-ios-app-webview-plays-audio-muted-when-screen-turrned-off%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

Please make sure that the Background Modes of Xcode project should be enabled.

If not enabled, go to Xcode project -> Select the target -> Capabilities section -> Background Modes -> Turn it on.

Then select Audio, AirPlay, and Picture in Picture.

enter image description here

Code:

import React, Component from 'react';
import StyleSheet, View, Button from 'react-native';
import SoundPlayer from 'react-native-sound-player';

export default class Touchables extends Component 
 constructor(props) 
 super(props);
 

 playTrack() 
 try 
 SoundPlayer.playUrl('http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')
 catch (e) 
 alert('Cannot play the file')
 console.log('cannot play the song file', e)
 
 

 render() 
 return (
 <View style=styles.container>
 <Button title="play me" onPress=this.playTrack />
 </View>
 );
 


const styles = StyleSheet.create(
 container: 
 marginTop: 100,
 ,
);

edited 2 days ago

answered 2 days ago

Sateesh

1,077513

add a comment |

up vote
2
down vote

Please make sure that the Background Modes of Xcode project should be enabled.

If not enabled, go to Xcode project -> Select the target -> Capabilities section -> Background Modes -> Turn it on.

Then select Audio, AirPlay, and Picture in Picture.

enter image description here

Code:

import React, Component from 'react';
import StyleSheet, View, Button from 'react-native';
import SoundPlayer from 'react-native-sound-player';

export default class Touchables extends Component 
 constructor(props) 
 super(props);
 

 playTrack() 
 try 
 SoundPlayer.playUrl('http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')
 catch (e) 
 alert('Cannot play the file')
 console.log('cannot play the song file', e)
 
 

 render() 
 return (
 <View style=styles.container>
 <Button title="play me" onPress=this.playTrack />
 </View>
 );
 


const styles = StyleSheet.create(
 container: 
 marginTop: 100,
 ,
);

edited 2 days ago

answered 2 days ago

Sateesh

1,077513

add a comment |

up vote
2
down vote

Please make sure that the Background Modes of Xcode project should be enabled.

If not enabled, go to Xcode project -> Select the target -> Capabilities section -> Background Modes -> Turn it on.

Then select Audio, AirPlay, and Picture in Picture.

enter image description here

Code:

import React, Component from 'react';
import StyleSheet, View, Button from 'react-native';
import SoundPlayer from 'react-native-sound-player';

export default class Touchables extends Component 
 constructor(props) 
 super(props);
 

 playTrack() 
 try 
 SoundPlayer.playUrl('http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')
 catch (e) 
 alert('Cannot play the file')
 console.log('cannot play the song file', e)
 
 

 render() 
 return (
 <View style=styles.container>
 <Button title="play me" onPress=this.playTrack />
 </View>
 );
 


const styles = StyleSheet.create(
 container: 
 marginTop: 100,
 ,
);

edited 2 days ago

answered 2 days ago

Sateesh

1,077513

Please make sure that the Background Modes of Xcode project should be enabled.

If not enabled, go to Xcode project -> Select the target -> Capabilities section -> Background Modes -> Turn it on.

Then select Audio, AirPlay, and Picture in Picture.

enter image description here

Code:

import React, Component from 'react';
import StyleSheet, View, Button from 'react-native';
import SoundPlayer from 'react-native-sound-player';

export default class Touchables extends Component 
 constructor(props) 
 super(props);
 

 playTrack() 
 try 
 SoundPlayer.playUrl('http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')
 catch (e) 
 alert('Cannot play the file')
 console.log('cannot play the song file', e)
 
 

 render() 
 return (
 <View style=styles.container>
 <Button title="play me" onPress=this.playTrack />
 </View>
 );
 


const styles = StyleSheet.create(
 container: 
 marginTop: 100,
 ,
);

import React, Component from 'react';
import StyleSheet, View, Button from 'react-native';
import SoundPlayer from 'react-native-sound-player';

export default class Touchables extends Component 
 constructor(props) 
 super(props);
 

 playTrack() 
 try 
 SoundPlayer.playUrl('http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')
 catch (e) 
 alert('Cannot play the file')
 console.log('cannot play the song file', e)
 
 

 render() 
 return (
 <View style=styles.container>
 <Button title="play me" onPress=this.playTrack />
 </View>
 );
 


const styles = StyleSheet.create(
 container: 
 marginTop: 100,
 ,
);

import React, Component from 'react';
import StyleSheet, View, Button from 'react-native';
import SoundPlayer from 'react-native-sound-player';

export default class Touchables extends Component 
 constructor(props) 
 super(props);
 

 playTrack() 
 try 
 SoundPlayer.playUrl('http://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')
 catch (e) 
 alert('Cannot play the file')
 console.log('cannot play the song file', e)
 
 

 render() 
 return (
 <View style=styles.container>
 <Button title="play me" onPress=this.playTrack />
 </View>
 );
 


const styles = StyleSheet.create(
 container: 
 marginTop: 100,
 ,
);

edited 2 days ago

answered 2 days ago

Sateesh

1,077513

edited 2 days ago

answered 2 days ago

Sateesh

1,077513

answered 2 days ago

Sateesh

1,077513

answered 2 days ago

Sateesh

1,077513

add a comment |

rami-sf is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

rami-sf is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth