Why can’t JavaScript .play() audio files on iPhone safari?

by

To add to xingliang cai’s response, here’s a code sample I got to work for me (edited below to work on iOS14, thanks @AndrewL!):

const soundEffect = new Audio();
soundEffect.autoplay = true;

// onClick of first interaction on page before I need the sounds
// (This is a tiny MP3 file that is silent and extremely short - retrieved from https://bigsoundbank.com and then modified)
soundEffect.src = "data:audio/mpeg;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFTb25vdGhlcXVlLm9yZwBURU5DAAAAHQAAA1N3aXRjaCBQbHVzIMKpIE5DSCBTb2Z0d2FyZQBUSVQyAAAABgAAAzIyMzUAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAAAAD/80DEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQsRbAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQMSkAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src="https://stackoverflow.com/questions/31776548/path/to/file.mp3";

More Related Contents:

  1. Programmatically selecting text in an input field on iOS devices (mobile Safari)
  2. iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
  3. How do I correctly detect orientation change using Phonegap on iOS?
  4. Check if URL scheme is supported in javascript
  5. Prevent orientation change in iOS Safari
  6. Is there any way to use window.onbeforeunload on Mobile Safari for iOS devices?
  7. Invoke native date picker from web-app on iOS/Android
  8. How to detect in iOS webapp when switching back to Safari from background?
  9. Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
  10. how to intercept Button click inside UIWebview on IOS?
  11. Facebook OAuth “Unsupported” in Chrome on iOS
  12. How to detect device name in Safari on iOS 13 while it doesn’t show the correct user agent?
  13. How do I hide the address bar on iPhone?
  14. How to open Safari from a WebApp in iOS 7
  15. Low power mode detection in JavaScript for iOS11?
  16. Detect a finger swipe through JavaScript on the iPhone and Android
  17. $(document).click() not working correctly on iPhone. jquery [duplicate]
  18. How can I record a conversation / phone call on iOS?
  19. Video auto play is not working in Safari and Chrome desktop browser
  20. Node.js can’t create Blobs?
  21. Works in Chrome, but breaks in Safari: Invalid regular expression: invalid group specifier name /(?
  22. How to open a native iOS app from a web app
  23. JavaScript – window.scroll({ behavior: ‘smooth’ }) not working in Safari
  24. Javascript in UIWebView callback to C/Objective-C
  25. iScroll 4 not working with form element iPhone Safari and Android browser
  26. What is the best method of re-rendering a web page on orientation change?
  27. How can I open an external link in Safari not the app’s UIWebView?
  28. Detect double tap on ipad or iphone screen using javascript
  29. How can I request an increase to the HTML5 localstorage size on iPad, like the FT web app does?
  30. Available iPhone Web Application JavaScript UI Library/Frameworks

Leave a Comment