javascript - Reproductor de audio HTML5 "Autoplay" en navegadores móviles

iphone html5-audio (1)

Esta pregunta ha sido respondida en otros lugares antes.

Respecto a los dispositivos Apple específicamente:

¿Puedes reproducir automáticamente videos HTML5 en el iPad?
- "Apple tomó la decisión de deshabilitar la reproducción automática de video en dispositivos iOS, a través de implementaciones de scripts y atributos. En Safari, en iOS (para todos los dispositivos, incluido iPad), donde el usuario puede estar en una red celular y cobrar por unidad de datos, la precarga y la reproducción automática están desactivadas. No se cargan datos hasta que el usuario los inicia ".
Safari HTML5 Audio and Video Guide - Consideraciones específicas de iOS
- "En Safari en iOS (para todos los dispositivos, incluido iPad), donde el usuario puede estar en una red celular y cobrar por unidad de datos, la precarga y la reproducción automática están desactivadas. No se cargan datos hasta que el usuario lo inicia. Esto significa que JavaScript Los métodos play () y load () también están inactivos hasta que el usuario inicia la reproducción, a menos que el método play () o load () sea activado por la acción del usuario. En otras palabras, un botón Play iniciado por el usuario funciona, pero onLoad = " play () "el evento no".

Buscar en Google revelará más.

He leído en algunos lugares que Chrome en Android también se comporta de esta manera, aunque otros navegadores de Android pueden no hacerlo.

Cómo se aplica esto específicamente a su caso:

Normalmente, solo hacer clic en un enlace funcionaría bien si el reproductor estuviera en la misma página, ya que el clic en ese enlace se consideraría una interacción válida del usuario para iniciar la reproducción de medios. Pero está cargando una nueva página, lo que restablece esta verificación para la interacción del usuario, por lo que los medios no comenzarán hasta que el usuario interactúe con la nueva página de alguna manera. Por lo tanto, el usuario tiene que desplazarse, tocar, tocar, deslizar o algo así para reproducir automáticamente, o simplemente presionar el botón de reproducción en el reproductor multimedia.

Estoy creando un sitio web de música HTML5 para usuarios móviles. El objetivo es hacer que se ejecute completamente en navegadores móviles.

El problema es que cuando un usuario selecciona una pista para reproducir, se lo lleva a la página "reproductor". Luego, AJAX en un elemento de audio HTML5 con el atributo de reproducción automática establecido en verdadero. Esto funciona muy bien en computadoras de escritorio, no tanto en dispositivos móviles.

Sin embargo, la pista no se reproduce una vez que se llega a esta página, y el usuario debe hacer clic explícitamente en reproducir desde esta página de reproductor para que comience la reproducción de audio. ¿Alguna idea sobre cómo puedo ajustar mi flujo para que la reproducción de audio se reproduzca automáticamente después de cargar la página de reproducción?

Aquí está mi código HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Mobile Websites</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/responsive.css"> <link href=''http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,800italic,700italic'' rel=''stylesheet'' type=''text/css''> <script type=''text/javascript'' src=''js/jquery.js''></script> <script type=''text/javascript'' src=''js/amazingaudioplayer.js''></script> </head> <body> <div class="right-part"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-color"> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> <div class="back"><a href="index.html">back</a></div> </div> <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10"> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> <div class="song-name">Player</div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="playerr"></div> </div> </div> </div> </div> <div class="bg"> <div class="container filter-main-div"> <div class="song-main-div row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 player-div">  <div id="primary"> <div class="demo-slider"> <link rel="stylesheet" type="text/css" media="all" href="css/initaudioplayer.css" /> <div id="amazingaudioplayer-7" style="display:block;position:relative;width:320px;height:164px;margin:0px auto 0px;"><div class="suffle">Suffle</div> <ul class="amazingaudioplayer-audios" style="display:none;"> <li data-artist="pinkzebra" data-title="In The Moment of Inspiration" data-album="AudioJungle" data-info="" data-image="images/diamon-img.png" data-duration="154"> <div class="amazingaudioplayer-source" data-src="audio/devesh.mp3" data-type="audio/mpeg" /> </li> </ul> </div><div class="play-fav"><a class="fav" href="#123">sdfsdfsdfdsf</a></div> </div> </div> <script src="js/initaudioplayer.js"></script> </div> </div> </div> </div>   <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script> </body> </html>

initaudioplayer.js:

jQuery(document).ready(function(){ var jsFolder = "images"; jQuery("#amazingaudioplayer-7").amazingaudioplayer({ jsfolder:jsFolder, volumeimagewidth:24, barbackgroundimage:"", imagewidth:100+''%'', showtime:true, titleinbarwidth:80, showprogress:true, random:false, titleformat:"%TITLE%", height:164, prevnextimage:"prevnext-48-48-0.png", showinfo:true, imageheight:100+''%'', skin:"MusicBox", loopimage:"repeat-img.png", loopimagewidth:33, volumebarheight:80, prevnextimageheight:40, infoformat:"By %ARTIST% %ALBUM%<br />%INFO%", showstop:false, showvolumebar:true, width:320, showtitleinbar:false, showloop:true, volumeimage:"volume-24-24-1.png", playpauseimagewidth:75, loopimageheight:36, tracklistitemformat:"%ORDER%. %TITLE% %DURATION%", prevnextimagewidth:40, tracklistarrowimage:"tracklistarrow-16-16-0.png", playpauseimageheight:75, showbackgroundimage:false, progresswidthmode:"fixed", stopimage:"stop-48-48-0.png", showvolume:true, playpauseimage:"playpause-48-48-0.png", showprevnext:true, backgroundimage:"", volumebarpadding:8, progressheight:8, showtracklistbackgroundimage:false, progresswidth:296, showtitle:true, tracklistarrowimageheight:16, heightmode:"fixed", titleinbarformat:"%TITLE%", showtracklist:true, stopimageheight:48, volumeimageheight:24, stopimagewidth:48, tracklistbackgroundimage:"", showbarbackgroundimage:false, showimage:true, tracklistwidth:320, tracklistarrowimagewidth:16, timeformat:"%CURRENT% / %DURATION%", autoplay:true, loop:1, tracklistitem:10 }); });