JavaScript / HTML5 audio: reproduce el archivo mp3 cargado por el usuario mediante el selector de archivos en Android Chrome

Estoy tratando de crear un sitio donde el usuario puede seleccionar un archivo de audio local de su PC o tableta y (sin subir el archivo al servidor) reproducir ese archivo usando HTML5 etiqueta de audio (se supone que el usuario haga clic en el botón para reproducirlo, autoplay No es necesario). No puedo lograr esto en la versión para Android de Chrome a pesar de que este navegador debe soportar todo lo que se necesita. En la versión de escritorio de Chrome funciona.

He intentado métodos diferentes cómo cargar ese archivo:

  1. A través de JavaScript FileReader – se puede jugar con él aquí: http://liveweave.com/2kOWoz

    function handleFileSelect(evt) { var files = evt.target.files; // FileList object playFile(files[0]); } function playFile(file) { var freader = new FileReader(); freader.onload = function(e) { player.src = e.target.result; }; freader.readAsDataURL(file); } player = document.getElementById('player'); document.getElementById('files').addEventListener('change', handleFileSelect, false); document.getElementById('play').onclick = function(){ player.play(); }; 
  2. A través de URL.createObjectURL – editar aquí: http://liveweave.com/4y84XV La segunda es muy similar a la primera – sólo la función playFile es así:

     function playFile(file) { player.src = URL.createObjectURL(file); } 

¿Qué hay de malo en esos ejemplos? ¿Hay alguna otra forma de lograr el resultado esperado? Agradecería cualquier sugerencias o ideas. Gracias.

Es posible que desee probar y ver si la API de audio funciona para usted (que existía antes de HTML5 <audio> ). Puede leer directamente ArrayBuffer s

Por ejemplo, cargar un WAV es simple:

HTML:

 <input id="files" type="file" id="files" name="files[]" multiple /> 

Javscript:

 window.AudioContext = window.AudioContext || window.webkitAudioContext; var context = new window.AudioContext(); var source; function playSound(arraybuffer) { context.decodeAudioData(arraybuffer, function (buf) { source = context.createBufferSource(); source.connect(context.destination); source.buffer = buf; source.start(0); }); } function handleFileSelect(evt) { var files = evt.target.files; // FileList object playFile(files[0]); } function playFile(file) { var freader = new FileReader(); freader.onload = function (e) { console.log(e.target.result); playSound(e.target.result); }; freader.readAsArrayBuffer(file); } document.getElementById('files').addEventListener('change', handleFileSelect, false); 

Jsfiddle: http://jsfiddle.net/SpacePineapple/8xZUD/2/

http://ericbidelman.tumblr.com/post/13471195250/web-audio-api-how-to-playing-audio-based-on-user

  • La aplicación se comporta diferente después de salir y volver a entrar
  • La fecha de Javascript no es válida en iOS
  • Autenticar la aplicación HTML5 envuelta con Phonegap (o equivalente)
  • Teclas de captura digitadas en el teclado virtual android con javascript
  • Android no abrirá los enlaces de Google para jugar desde javascript en la aplicación web
  • Cómo acceder a Android desde el navegador
  • facingMode en MediaDevices.getUserMedia no parece funcionar en el último Android Chrome (v53)
  • Rellene los datos del sitio web y haga clic en el botón y analizar la respuesta.
  • Escribir una aplicación de estación de radio de telefonía móvil - ¿es viable Javascript / HTML / CSS, o tenemos que volver a ser nativo?
  • Href no funciona, cómo redirigir a una página específica en PhoneGap?
  • ¿Cómo puedo detectar qué motor javascript (v8 o JSC) se utiliza en tiempo de ejecución en Android?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.