android - descargar - El audio HTML5 no se reproduce en la aplicación PhoneGap(¿es posible usar medios?)
phonegap tutorial (6)
Creo que deberías decir "Funciona bien en el navegador de escritorio", es más una cuestión de compatibilidad de medios en el navegador predeterminado de Android que un problema con el teléfono.
Según esta página , el navegador Android admite mp3 en algunos dispositivos y ogg en otros. Tal vez su problema es que está tratando de usar mp3 en un dispositivo que solo admite ogg para medios en el navegador.
El uso de un plugin de medios de phonegap debería resolver el problema.
El ejemplo completo en la página de documentación es bastante claro. Solo tiene que copiar en su página las playAudio , onSuccess y onError y luego llamar a playAudio cada vez que quiera reproducir un archivo.
El html de tu página podría verse así:
<button class="button" id="btnYes">Yes</button>
<button class="button" id="btnNo">No</button>
y el javasctipt (usando jquery):
document.addEventListener("deviceready", function () {
$("#btnYes").on("click", function () {
playAudio(audio/basic/yes.mp3);
});
$("#btnNo").on("click", function () {
playAudio(audio/basic/no.mp3);
});
}, false);
var my_media = null;
var mediaTimer = null;
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
}
// onSuccess Callback
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
function onError(error) {
alert(''code: '' + error.code + ''/n'' +
''message: '' + error.message + ''/n'');
}
Las llamadas a playAudio también podrían estar en el onclick directamente en html, pero prefiero usar jquery para comenzar a escuchar clics solo una vez que Phonegap esté listo.
No olvides incluir cordova.js, y si estás utilizando phonegap 3.x no olvides instalar el complemento org.apache.cordova.media
Editar:
path audio/basic/yes.mp3 asume que el archivo está en la carpeta de audio en la raíz de la tarjeta sd.
utilice /android_asset/www/audio/basic/yes.mp3 si la carpeta de audio está ubicada en la carpeta www de faja de teléfono.
Trabajando en una placa de sonido básica para un viaje al extranjero. Configurar todo para que funcione bien en los navegadores, pero quería usar PhoneGap Build / GitHub para que sea descargable ya que el servicio celular no estará disponible.
Todo funciona bien en el navegador de escritorio, pero una vez que está instalado en Android, los archivos mp3 no se reproducen. He leído algunas otras publicaciones aquí sobre las inconsistencias de los mp3 en PhoneGap. Algunas sugerencias ofrecidas usando "medios" en lugar de. No estoy seguro de cómo cambiar eso en lugar del código que tengo ahora. Parece usar javascript en lugar de solo html. http://docs.phonegap.com/en/2.0.0/cordova_media_media.md.html#Media Muestra de lo que estoy usando:
<audio id="yes" src="audio/basic/yes.mp3"></audio>
<audio id="no" src="audio/basic/no.mp3"></audio>
<button class="button" onclick="document.getElementById(''yes'').play()">Yes</button>
<button class="button" onclick="document.getElementById(''no'').play()">No</button>
Funciona muy bien en el navegador, pero no en Android. ¿Alguien puede ofrecer un punto de partida para corregir el audio?
Gracias -BR
EDITAR 2-9-14
Sin suerte hasta ahora. El complemento multimedia se muestra correctamente instalado y se incluye cordova.js. Esto es lo que he intentado.
<!DOCTYPE HTML>
<html>
<head>
<title>Media Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function playAudio(url) {
// Play the audio file at url
var my_media = new Media(url,
// success callback
function() {
console.log("playAudio():Audio Success");
},
// error callback
function(err) {
console.log("playAudio():Audio Error: "+err);
});
// Play audio
my_media.play();
}
</script>
</head>
<body>
<a href="#" class="button" onclick="playAudio(''/android_asset/www/audio/basic/yes.mp3'');">Yes</a>
</body>
</html>
También intenté trabajar con el código que sugirió
<!DOCTYPE html>
<html>
<head>
<title>Transactions</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
var my_media = null;
var mediaTimer = null;
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function () {
// get my_media position
my_media.getCurrentPosition(
// success callback
function (position) {
if (position > -1) {
setAudioPosition((position) + " sec");
}
},
// error callback
function (e) {
console.log("Error getting pos=" + e);
setAudioPosition("Error: " + e);
});
}, 1000);
}
}
// onSuccess Callback
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
function onError(error) {
alert(''code: '' + error.code + ''/n'' +
''message: '' + error.message + ''/n'');
}
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
document.addEventListener("deviceready", function () {
$("#Yes").on("click", function () {
playAudio(audio/basic/yes.mp3);
});
$("#No").on("click", function () {
playAudio(audio/basic/no.mp3);
});
<button class="button" id="Yes">Yes</button>
<button class="button" id="No">No</button>
</body>
</html>
Editar 2/10/14
Desafortunadamente todavía no tuve suerte. La actualización más reciente a continuación
<!DOCTYPE html>
<html>
<head>
<title>Transactions</title>
<!-- JavaScript -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function () {
$("#yes").on("click", function () {
playAudio(/android_asset/www/audio/basic/yes.mp3);
});
$("#no").on("click", function () {
playAudio(/android_asset/www/audio/basic/no.mp3);
});
}, false);
var my_media = null;
var mediaTimer = null;
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
}
// onSuccess Callback
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
function onError(error) {
alert(''code: '' + error.code + ''/n'' +
''message: '' + error.message + ''/n'');
}
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="button" id="yes">Yes</button>
<button class="button" id="no">No</button>
</body>
</html>
Si está compilando compilación en la nube,
Simplemente agregue la siguiente línea en su index.html
<script type="text/javascript" src="phonegap.js"></script>
Nota: No es necesario incluir source phonegap.js, mientras se compila build phonegap.js se agregará.
También incluya el plugin multimedia en config.xml como:
Si la plataforma es Android, si los medios están presentes en la raíz, la URL de medios debe ser: /android_asset/www/test.mp3
¡He estado golpeándome la cabeza toda la semana y finalmente logré que Media funcionara! Hay muchos errores
Según la respuesta de Geevan, necesitas <script type="text/javascript" src="phonegap.js"></script> en tu página.
Paso 1:
Necesita utilizar org.apache.cordova.media versión 0.2.9 o superior (estoy usando 0.2.11). Al escribir estas líneas, PhoneGap Build solo admite hasta la versión 0.2.8. Creo que las notas del parche para 0.2.9 pueden haber resuelto mis problemas.
Paso 2:
La documentación de PhoneGap para la versión 3.0.0 tiene un error tipográfico, asegúrese de estar utilizando al menos la documentación 3.3.0 y asegúrese de que la siguiente información esté libre de config.xml en su config.xml :
<feature name="Media">
<param name="android-package" value="org.apache.cordova.media.AudioHandler" />
</feature>
(la palabra "media" en "org.apache.cordova.media.AudioHandler" faltaba en la documentación 3.0.0)
Paso 3:
Si se ve obligado a usar la versión CLI de PhoneGap (NO PhoneGap Build) debido al problema descrito en el paso 1, asegúrese de agregar los complementos necesarios. Esto se describe en la documentación :
> cordova plugin add org.apache.cordova.media
Y agrega <gap:plugin name="org.apache.cordova.media" /> a tu config.xml
Etapa 4:
Necesita agregar "/ android_asset / www /" a todas sus rutas de archivos de audio. P.ej:
new Media(''/android_asset/www/'' + src);
Paso 5:
Haga toda la carga de audio después de que el dispositivo esté listo. P.ej:
document.addEventListener("deviceready", Game.load);
Una vez que hice estos cambios, ¡mi audio comenzó a funcionar! ¡Buena suerte!
Uff eso fue realmente difícil y confuso ... ¡Pero finalmente lo hice!
Aquí es exactamente lo que hice:
index.html
<audio id="successSound" src="sounds/sayHello.mp3" type="audio/mpeg" ></audio>
<button onclick="playAudio(''successSound'')">Play successSound local</button>
AndroidManifest.xml
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
index.js
function playAudio(id) {
var audioElement = document.getElementById(id);
var url = audioElement.getAttribute(''src'');
var my_media = new Media(''/android_asset/www/'' + url,
// success callback
function () { console.log("playAudio():Audio Success"); },
// error callback
function (err) { console.log("playAudio():Audio Error: " + err); }
);
// Play audio
my_media.play();
}
plataforma / android / res / xml.config
<feature name="Media">
<param name="android-package" value="org.apache.cordova.media.AudioHandler" />
</feature>
¡Y finalmente funciona! : D uhuuuuu
Es un problema de ruta de archivo de sonido .
en lugar de /android_asset/www/audio/AudioFile2.mp3
tratar
/android_asset/www/default/audio/AudioFile2.mp3
Veo que todas las otras configuraciones son correctas en tu código compartido.
Podría tratarse de un problema de seguridad del contenido, intente con este encabezado en su index.html. En mi proyecto de prueba, incluir o excluir hace o rompe la reproducción de audio y lee archivos locales con $.get() o algo así
<meta http-equiv="Content-Security-Policy" content="default-src ''self'' http://appvipswi.easwi.it; script-src ''self'' ''unsafe-inline''; media-src ''self''">