1

Not sure if it's related to Ionic, but when the page is loaded I have a button that play a sound.

If I click on that button - the sound does play.

Then, I wanted to play the same sound from that button - but when the page is loaded, so when the page is loaded - sound will play, when you click on that button - same sound will play.

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

I tried using ionViewDidEnter, setTimeout for 5 seconds ... but I'm keep getting this error msg of permission ...

UPDATE - MEI score

On purpose I set my permissions for Auto play sound: Block for finding the right solution.

I can raise the MEI score according to the following statement:

On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.

This means: - if somewhere on previous pages - I made a sound - switching to any other page - will also trigger sounds. - Or a valid click ( that loads a silent sound just to "collect" the permissions ) - also does the trick ..

Counting on that - when loading the Ionic project for the first time, then home.page.ts is being loaded, the trick here, is, when I click on the menu item for selecting an inner page to go to -> this is considered a valid click event for allowing playing audio files - in which the sound which didn't work before ( because I kept refreshing the same page w/o any clicks ) - now works on page switch..

UPDATE for background music ( for video games )

Found this thread ... I think it's the only way How to make audio autoplay on chrome

Ricky Levi
  • 7,298
  • 1
  • 57
  • 65
  • Even I'm getting the same error, the cause maybe media engagement score of chrome browser. `navigator.getUserMedia({audio: true}, (success) => console.log(success), error => {console.warn(error.toString());});` – Chenna Aug 23 '19 at 20:15
  • 1
    If your issue is related to MEI score and if you find any guide showing how to improve to improve MEI score, please post here also @Ricky – Chenna Aug 23 '19 at 20:18
  • so `navigator.getUserMedia` gives me `TypeError: navigator.getUserMedia is not a function`, so I used `navigator.mediaDevices.getUserMedia(` - response: `Promise { : "rejected" }` .. then I clicked on that button that made sound - and retried that code - response is still "rejected" ... (?!) – Ricky Levi Aug 24 '19 at 07:06

1 Answers1

0

It sounds like your issue is more related to browser permissions on automatically playing sounds.

Autoplay with sound is allowed if: User has interacted with the domain (click, tap, etc.). On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound. The user has added the site to their home screen on mobile or installed the PWA on desktop.

You can find more information here:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

The article goes on to suggest that when initiating programmatic audio play, a promise will be returned which can be used to handle success/fail cases, e.g.

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}
chrismclarke
  • 1,995
  • 10
  • 16
  • I thought so too, but loading that code - says that `audio`: request microphone permissions, `video`: request camera permissions ( which makes sense ) - but both I don't need ... I just want to play audio ... – Ricky Levi Aug 24 '19 at 07:01