HTML5 audio tag does not work in Android - Chrome when created in JS?
Looks like this is intended feature that spans more then just the Chrome browser. User interaction is required to get media elements to play.
Blink and WebKit have a setting for requiring a “user gesture” to play or pause an audio or video element, which is enabled in Opera for Android, Chrome for Android, the default Android browser, Safari for iOS and probably other browsers. This makes some sense, since mobile devices are used in public and in bed, where unsolicited sound from random Web sites could be a nuisance. Also, autoplaying video ads would waste bandwidth. Block Quote from 'blog.foolip.org'
Duplicate Threads from Other Users
Autoplay audio on mobile safari
How can I autoplay media in ios 4.2.1
Autoplay audio with ios 5 workaround?
Current Status
Developers have requested the deletion of 'mediaPlaybackRequiresUserGesture' which was reviewed and denied (for now). "We're going to gather some data about how users react to autoplaying videos in order to decide whether to keep this restriction."
Upon further inspection i found this...
"I misunderstood the outcome of the discussion (removing mediaPlaybackRequiresUserGesture) surrounding this topic. We need to keep this code in order to not break google.com while gathering data about this feature."
Google.com relies on the feature being disabled, otherwise it breaks (they didn't say what it breaks).
Original Bug Report
HTML5 audio not playing on Mobile Chrome (Android)
Android and iPhone touch events
touchstart ↔ mousedown
touchend ↔ mouseup
touchmove ↔
mousemove
touchcancel
document.getElementById('yourAudio').addEventListener("mouseup", tapOrClick, false);
document.getElementById('yourAudio').addEventListener("touchend", tapOrClick, false);
function tapOrClick(e) {
var mp3 = e.target;
mp3.parentNode.getElementsByTagName('audio')[0].play();
}
HTML5 audio tag is not working in Android
HTML5 Audio support is not consistent across different devices/OSes due to codec licensing issues and OS implementation/support. If you are just playing MP3 files, you can reliably handle those by using PhoneGap's Media class, which will provide consistent and reliable audio programming on all platforms.
If you want the ability to preload audio and have more advanced scenarios like polyphony or layering (like video game effects), you can use the LowLatencyAudio PhoneGap native plugin.
HTML5 Audio not playing on Chrome for Android
OK, I solved it myself. The .htaccess password protection, that I created, prevented the audio from playing on Chrome for Android. Although I logged into the web page and the site displayed correctly, audio could not be loaded. Safari on iOS had the same problem. Interestingly though, Firefox on Android worked just fine.
Related Topics
HTML Canvas: How to Draw a Flipped/Mirrored Image
Include CSS and JavaScript in My Django Template
Make the on Scroll Growing <Path> to Dashed Line
Detect High Contrast Extension Use in Chrome Browser
How to Position a Bootstrap Popover
Can Bootstrap (4) Be Integrated Along with Angular Material (2)
How to Use Jquery to Remove/Negate CSS !Important Rule
Detect and Log When External JavaScript or CSS Resources Fail to Load
Tinymce: How to Display All Toolbars on a Single Row
Jquery Draggable Event Changing the CSS of Child Element
Googlemaps Does Not Load on Page Load
Invert Colors of an Image in CSS or JavaScript
Export SASS/Scss Variables to JavaScript Without Exporting Them to CSS
How to Use Bootstrap 3 Together with Jquery Mobile
Hover Over a Hidden Element to Show It