HTML5音频PhoneGap的应用程序不打（可以使用媒体？） [英] HTML5 audio not playing in PhoneGap App (Possible to use Media?)
问题描述
工作的一个基本的声卡出国旅行。建立一切工作正常的浏览器，但想用的PhoneGap构建/ GitHub上，使其可下载的手机服务将无法使用。
不过一切都在桌面浏览器伟大的工作，一旦其安装在Android上，MP3文件不能播放。我读过一些人的帖子就到这里约的MP3对PhoneGap的不一致。代替使用媒体提出了一些建议。我不知道怎么换了在地方的code我现在有。似乎只使用HTML的JavaScript的替代。 http://docs.phonegap.com/en/2.0.0我使用的是什么样的/cordova_media_media.md.html#Media 示例：
＆LT;音频ID =是SRC =音频/基本/ yes.mp3＆GT;＆LT; /音频＆GT;
＆其中;音频的id =无的src =音频/基本/ no.mp3＆GT;＆所述; /音频＆GT;
＆LT;按钮类=按钮的onclick =的document.getElementById（'是'）播放（）。＆GT;是＆LT; /按钮＆GT;
＆LT;按钮类=按钮的onclick =的document.getElementById（'无'）播放（）。＆GT;不＆LT; /按钮＆GT;
在浏览器的伟大工程，但不是在Android上。任何人都可以提供一个出发点，以纠正声音？
谢谢 - BR
编辑14年2月9日
至今没有运气。媒体插件显示为正确安装和cordova.js也包括在内。下面是我试过。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;媒体例＆LT; /标题＆GT;
＆LT;链接相对=样式类型=文/ CSS的href =style.css文件＆GT;
＆LT;脚本类型=文/ JavaScript的字符集=utf-8SRC =cordova.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的字符集=utf-8＆GT;
功能playAudio（URL）{
//播放在URL中的音频文件
VAR my_media =新媒体（URL，
//成功回调
功能（） {
的console.log（playAudio（）：音频成功）;
}，
//错误回调
功能（错误）{
的console.log（playAudio（）：音频错误：+ ERR）;
}）;
//播放音频
my_media.play（）;
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; A HREF =＃级=按钮的onclick =playAudio（'/ android_asset /网络/音频/基本/ yes.mp3'）;＆GT;是＆LT; / A＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
也试过用$ C $工作c您提示
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;交易＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的字符集=utf-8SRC =cordova.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR my_media = NULL;
VAR mediaTimer = NULL;
功能playAudio（SRC）{
//创建一个从SRC媒体对象
my_media =新媒体（SRC，的onSuccess，onError的）;
//播放音频
my_media.play（）;
每一秒//更新my_media位置
如果（mediaTimer == NULL）{
mediaTimer =的setInterval（函数（）{
//获取my_media位置
my_media.getCurrentPosition（
//成功回调
功能（位置）{
如果（位置＆GT; -1）{
setAudioPosition（（位置）+秒）;
}
}，
//错误回调
功能（E）{
的console.log（错误获取POS =+ E）;
setAudioPosition（错误：+ E）;
}）;
}，1000）;
}
}
//的onSuccess回调
功能的onSuccess（）{
的console.log（playAudio（）：音频成功）;
}
// onerror的回调
功能onError的（错误）{
警报（'code：'+错误code +'\ N'+
信息：+ +返回Error.message'\ N'）;
}
＆LT; / SCRIPT＆GT;
＆LT;链接相对=样式类型=文/ CSS的href =style.css文件＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
document.addEventListener（deviceready，函数（）{
$（＃是）。在（点击，函数（）{
playAudio（音频/基本/ yes.mp3）;
}）;
$（＃号）。在（点击，函数（）{
playAudio（音频/基本/ no.mp3）;
}）;
＆LT;按钮类=按钮ID =是＆GT;是＆LT; /按钮＆GT;
＆LT;按钮类=按钮ID =否＆GT;不＆LT; /按钮＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
编辑14年2月10日
不幸的是仍然没有这样的运气。最近更新以下
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;交易＆LT; /标题＆GT;
＆LT;！ - JavaScript的 - ＆GT;
＆LT;脚本类型=文/ JavaScript的字符集=utf-8SRC =cordova.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
document.addEventListener（deviceready，函数（）{
$（＃是）。在（点击，函数（）{
playAudio（/android_asset/www/audio/basic/yes.mp3）;
}）;
$（＃无）。在（点击，函数（）{
playAudio（/android_asset/www/audio/basic/no.mp3）;
}）;
}， 假）;
VAR my_media = NULL;
VAR mediaTimer = NULL;
功能playAudio（SRC）{
//创建一个从SRC媒体对象
my_media =新媒体（SRC，的onSuccess，onError的）;
//播放音频
my_media.play（）;
}
//的onSuccess回调
功能的onSuccess（）{
的console.log（playAudio（）：音频成功）;
}
// onerror的回调
功能onError的（错误）{
警报（'code：'+错误code +'\ N'+
信息：+ +返回Error.message'\ N'）;
}
＆LT; / SCRIPT＆GT;
＆LT;！ - CSS - ＆GT;
＆LT;链接相对=样式类型=文/ CSS的href =style.css文件＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;按钮类=按钮ID =是＆GT;是＆LT; /按钮＆GT;
＆LT;按钮类=按钮ID =无＆GT;不＆LT; /按钮＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我想你应该说：伟大的作品在桌面浏览器，它更多的是支持的媒体不是问题的PhoneGap在Android默认浏览器的问题。
根据此页面，Android浏览器支持mp3上某些设备，和OGG别人。也许你的问题是，你要使用的MP3上的设备只支持OGG媒体浏览器？
使用的PhoneGap媒体插件应该解决的问题。
完整的例子在文档页面是相当清楚的。
你只需要在你的页面中的 playAudio ，的onSuccess 和的onError 函数，然后调用playAudio每当你要播放的文件。
您网页的HTML可能看起来像这样：
＆LT;按钮类=按钮ID =btnYes＆GT;是＆LT; /按钮＆GT;
＆LT;按钮类=按钮ID =btnNo＆GT;不＆LT; /按钮＆GT;
和javasctipt（使用jQuery）：
document.addEventListener（deviceready，函数（）{
$（＃btnYes）。在（点击，函数（）{
playAudio（音频/基本/ yes.mp3）;
}）;
$（＃btnNo）。在（点击，函数（）{
playAudio（音频/基本/ no.mp3）;
}）;
}， 假）;
VAR my_media = NULL;
VAR mediaTimer = NULL;
功能playAudio（SRC）{
//创建一个从SRC媒体对象
my_media =新媒体（SRC，的onSuccess，onError的）;
//播放音频
my_media.play（）;
}
//的onSuccess回调
功能的onSuccess（）{
的console.log（playAudio（）：音频成功）;
}
// onerror的回调
功能onError的（错误）{
警报（'code：'+错误code +'\ N'+
信息：+ +返回Error.message'\ N'）;
}
在调用playAudio也可以直接在HTML中的onclick，但我prefered使用jQuery开始监听点击一次PhoneGap的准备。
不要忘了包括cordova.js，如果你正在使用PhoneGap的3.X不要忘记安装org.apache.cordova.media插件
编辑：
路径音频/基本/ yes.mp3 假定该文件在音频文件夹在SD卡的根目录。
使用 /android_asset/www/audio/basic/yes.mp3 如果音频文件夹位于PhoneGap的WWW文件夹。
Working on a basic sound board for a trip abroad. Set up everything to work fine in Browsers but wanted to use PhoneGap Build/GitHub to make it downloadable as cell service won't be available.
Everything working great in desktop browser however once its installed on Android, the mp3 files don't play. I've read some others posts on here about the inconsistencies of mp3s on PhoneGap. Some suggestions offered using "media" in place of . I'm not sure how to swap that out in place of the code I have now. Seems to use javascript instead of just html. http://docs.phonegap.com/en/2.0.0/cordova_media_media.md.html#Media Sample of what I'm using:
<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>
Works great in browser, but not on Android. Can anyone offer a starting point to correct the audio?
Thanks -BR
EDIT 2-9-14
No luck so far. The media plugin is showing as correctly installed and cordova.js is included. Here's what I've tried.
<!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>
Also tried to work with the code you suggested
<!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>
Edit 2/10/14
Unfortunately still no such luck. Most recent update below
<!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>
I think you should say "Works great in desktop browser", it is more a matter of support of media in the android default browser than an issue with phonegap.
According to this page, the android browser supports mp3 on some device, and ogg on others. Maybe your issue is that you're trying to use mp3 on a device only supporting ogg for media in the browser?
Using phonegap media plugin should solve the problem.
The full example in the documentation page is quite clear.
You just have to copy in your page the playAudio, onSuccess and onError functions and then call playAudio whenever you want to play a file.
The html of your page could look like this :
<button class="button" id="btnYes">Yes</button>
<button class="button" id="btnNo">No</button>
and the javasctipt (using 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');
}
The calls to playAudio could also be in the onclick directly in the html, but I prefered to use jquery to start listening for clicks only once phonegap is ready.
Don't forget to include cordova.js, and if you're using phonegap 3.x don't forget to install the org.apache.cordova.media plugin
Edit:
path audio/basic/yes.mp3 assumes that the file is in the audio folder at the root of the sd card.
use /android_asset/www/audio/basic/yes.mp3 if the audio folder is located in the phonegap www folder.
这篇关于HTML5音频PhoneGap的应用程序不打（可以使用媒体？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
