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 17 hours ago

rami-sf

New contributor

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
17 hours 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 17 hours ago

rami-sf

New contributor

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
17 hours 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 17 hours 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 17 hours ago

rami-sf

New contributor

asked 17 hours ago

rami-sf

New contributor

asked 17 hours ago

rami-sf

New contributor

asked 17 hours ago

rami-sf

asked 17 hours 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
17 hours ago

add a comment |

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

What package are you using right now for audio playing? Show the code in the question please.
– Sateesh
17 hours 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 17 hours ago

answered 17 hours ago

Sateesh

1,058313

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

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 17 hours ago

answered 17 hours ago

Sateesh

1,058313

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 17 hours ago

answered 17 hours ago

Sateesh

1,058313

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 17 hours ago

answered 17 hours ago

Sateesh

1,058313

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 17 hours ago

answered 17 hours ago

Sateesh

1,058313

edited 17 hours ago

answered 17 hours ago

Sateesh

1,058313

answered 17 hours ago

Sateesh

1,058313

answered 17 hours ago

Sateesh

1,058313

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

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

搜尋此網誌

Vfrdtyky