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:
- JavaScript caret position
- ¿Cómo obtengo el ancho 'css-pixel' (media-query) con Javascript?
- Abrir la página de detalles de Google Play para una aplicación a través de una redirección de JavaScript desde un navegador Android
- Obtener nombre de archivo después de que el filereader cargue asincrónicamente un archivo
- ¿Qué es una buena alternativa iScroll que admita iOS, Android, WP8 y funcionalidad pull-to-refresh?
-
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(); };
-
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.
- JQuery móvil deshabilitar el contenido de la página desplazamiento vertical
- Acceso denegado utilizando almacenamiento local en Android WebView
- Ejecución de la ecuación matemática en Android
- AppView.addJavascriptInterface () no funciona en la API 17
- Reaccionar nativo: seleccionable vista de lista de sección da error
- Cómo realizar 3D Curve Wall con jQuery o js
- SyntaxError: El modo estricto no permite declaraciones de función en una sentencia anida de forma lexical
- Alternativa a getUserMedia () para la lectura de flujo de cámara en vivo en iOS?
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
- VideoView no reproduce vídeo en bucle solo en Galaxy s4
- Android Drawer Layout está mostrando contenido de fragmentos