search

scottschiller / SoundManager2

A JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio + RTMP, providing reliable cross-browser/platform audio control in as little as 12 KB. BSD licensed.
http://www.schillmania.com/projects/soundmanager2/
Other
4.99k stars 768 forks source link

Not able to play songs in safari #231

Open pallavi1993 opened 6 years ago

pallavi1993 commented 6 years ago

Hi all, Am using react-sound npm which uses soundmanager as its dependency. i have created a react music player for web.

Am able to play the songs for chrome and firefox very smoothly but coming to safari the song starts breaking. When i observed the console, i saw setPosition() is always being set to some value, which makes the song to break. What can be the solution for it. Also in iphones/ipads an unable to play the song in any browser whether it is safari/chrome/firefox.

Please help me asap.

@scottschiller

You can check this link [http://18.234.38.144/]

scottschiller commented 6 years ago

@pallavi1993 Apologies for a very non-ASAP response. 😓

Make sure you don't have any asynchronous operations between the user click / tap, and attempting to play sounds. Take a look at the console for errors from the browser, e.g., "sound playback was blocked because it did not initiate from a user action" and such.

When one sound finishes playing, you need to immediately play the next one for playback to be continuous.

pallavi1993 commented 6 years ago

Hi @scottschiller ,

There are no asynchronous operations. Even-though a user action is provided it is unable to play now. Safari send me an error that user action is required.

Also i have updated my code at the following link [http://18.234.38.144/] where the code runs without a popup.

I am attaching the screenshot of the error too. safari error

scottschiller commented 6 years ago

@pallavi1993 Looks like you're still trying to play sound automatically, and it's being blocked by Safari. Wait until user click, then immediately try to create and play. No setTimeout() or other async operations allowed, that will result in play being blocked.

[Error] Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
    (anonymous function)
    rejectPromise
    play
    play (main-new-code.js:27833:665)
    n (main-new-code.js:21792:99)
    (anonymous function) (main-new-code.js:21833)
    s (main-new-code.js:21726)
    value (main-new-code.js:21803)
    value (main-new-code.js:21794)
    value
    notifyAll (main-new-code.js:7068)
    close (main-new-code.js:20592)
    closeAll (main-new-code.js:2625)
    perform (main-new-code.js:2600)
    perform (main-new-code.js:2595:91)
    S (main-new-code.js:664)
    S
    closeAll (main-new-code.js:2625)
    perform (main-new-code.js:2600)
    c (main-new-code.js:613)
    r (main-new-code.js:4006)
    enqueueSetState (main-new-code.js:4052:86)
    setState (main-new-code.js:7885:112)
    (anonymous function) (main-new-code.js:13293)
    r (main-new-code.js:22305)
    (anonymous function) (main-new-code.js:22382)
    r (main-new-code.js:12630)
    initializePromise
    Promise
    (anonymous function) (main-new-code.js:12627)
    r (main-new-code.js:22305)
    (anonymous function) (main-new-code.js:22382)
    r (main-new-code.js:12630)
    (anonymous function) (main-new-code.js:12636)
    promiseReactionJob
[Error] Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
    (anonymous function)
    rejectPromise
    play
    resume (main-new-code.js:27882:140)
    n (main-new-code.js:21792:123)
    value (main-new-code.js:21794)
    value
    notifyAll (main-new-code.js:7068)
    close (main-new-code.js:20592)
    closeAll (main-new-code.js:2625)
    perform (main-new-code.js:2600)
    perform (main-new-code.js:2595:91)
    S (main-new-code.js:664)
    S
    closeAll (main-new-code.js:2625)
    perform (main-new-code.js:2600)
    c (main-new-code.js:613)
    r (main-new-code.js:4006)
    enqueueSetState (main-new-code.js:4052:86)
    setState (main-new-code.js:7885:112)
    setPlayStatus (main-new-code.js:13320)
    (anonymous function) (main-new-code.js:12830:229)
    r (main-new-code.js:22305)
    (anonymous function) (main-new-code.js:22382)
    r (main-new-code.js:12630)
    initializePromise
    Promise
    (anonymous function) (main-new-code.js:12627)
scottschiller commented 6 years ago

The above callstack looks like it involves React, and perhaps things are becoming async between click and play attempt. I'm not sure, but having a promise in there might cause the problem.

I suggest trying to start playback first immediately from a click, and then update state so your UI re-renders.