Fatal编程技术网
  • android/
  • Android PhoneGap应用程序中未播放HTML5音频（可能使用媒体？）

Android PhoneGap应用程序中未播放HTML5音频（可能使用媒体？）

android html cordova

Android PhoneGap应用程序中未播放HTML5音频（可能使用媒体？）,android,html,cordova,phonegap-build,Android,Html,Cordova,Phonegap Build,为出国旅行制作基本的音效板。将所有内容设置为在浏览器中正常工作，但希望使用PhoneGap Build/GitHub使其可下载，因为手机服务将不可用 桌面浏览器的一切都很好，但是一旦安装在Android上，mp3文件就不能播放了。我在这里读过一些关于PhoneGap上MP3不一致的帖子。提出了一些用“媒体”代替传统媒体的建议。我不知道如何替换掉我现在的代码。似乎使用javascript而不仅仅是html。我正在使用的示例： <audio id="yes" src="audio/basic/

为出国旅行制作基本的音效板。将所有内容设置为在浏览器中正常工作，但希望使用PhoneGap Build/GitHub使其可下载，因为手机服务将不可用

桌面浏览器的一切都很好，但是一旦安装在Android上，mp3文件就不能播放了。我在这里读过一些关于PhoneGap上MP3不一致的帖子。提出了一些用“媒体”代替传统媒体的建议。我不知道如何替换掉我现在的代码。似乎使用javascript而不仅仅是html。我正在使用的示例：

<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>
还尝试使用您建议的代码

<!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>


交易
var my_media=null；
var mediaTimer=null；
功能播放音频（src）{
//从src创建媒体对象
my_media=新媒体（src、onSuccess、onError）；
//播放音频
我的媒体播放（）；
//每秒更新我的媒体位置
如果（mediaTimer==null）{
mediaTimer=setInterval（函数（）{
//得到我的媒体职位
my_media.getCurrentPosition(
//成功回调
职能（职位）{
如果（位置>-1）{
设置音频位置（（位置）+“秒”）；
}
},
//错误回调
职能（e）{
console.log（“获取位置时出错=”+e）；
设置音频位置（“错误：+e”）；
});
}, 1000);
}
}
//onSuccess回调
函数onSuccess（）{
log（“playAudio（）：音频成功”）；
}
//错误回调
函数onError（错误）{
警报（'code:'+error.code+'\n'+
'消息：'+error.message+'\n'）；
}
文档.添加的事件列表器（“deviceready”，函数（）{
$（“#是”）。在（“单击”上，函数（）{
播放音频（audio/basic/yes.mp3）；
});
$（“#否”）。在（“单击”，函数（）{
播放音频（音频/基本/无mp3）；
});
对
不
2014年10月2日编辑

不幸的是仍然没有这样的运气。最新更新如下

<!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>


交易
文档.添加的事件列表器（“deviceready”，函数（）{
$（“#是”）。在（“单击”上，函数（）{
playAudio（/android_asset/www/audio/basic/yes.mp3）；
});
$（“#否”）。在（“单击”，函数（）{
playAudio（/android_asset/www/audio/basic/no.mp3）；
});
}，假）；
var my_media=null；
var mediaTimer=null；
功能播放音频（src）{
//从src创建媒体对象
my_media=新媒体（src、onSuccess、onError）；
//播放音频
我的媒体播放（）；
}
//onSuccess回调
函数onSuccess（）{
log（“playAudio（）：音频成功”）；
}
//错误回调
函数onError（错误）{
警报（'code:'+error.code+'\n'+
'消息：'+error.message+'\n'）；
}
对
不
我想你应该说“在桌面浏览器中工作得很好”，这更多的是android默认浏览器中的媒体支持问题，而不是phonegap的问题

根据，android浏览器在某些设备上支持mp3，在其他设备上支持ogg。可能您的问题是，您试图在浏览器中仅支持ogg媒体的设备上使用mp3

使用可以解决问题

文档页面中的完整示例非常清楚。 您只需在页面中复制
playAudio
、
onSuccess
和
onError
功能，然后在需要播放文件时调用playAudio

页面的html可能如下所示：

<button class="button" id="btnYes">Yes</button>
<button class="button" id="btnNo">No</button>
对playAudio的调用也可以直接在html中的onclick中，但我更喜欢使用jquery只在phonegap就绪后才开始侦听单击

不要忘记包括cordova.js，如果您使用的是phonegap 3.x，也不要忘记安装org.apache.cordova.media插件

编辑： 路径
audio/basic/yes.mp3
假定文件位于sd卡根目录下的音频文件夹中

如果音频文件夹位于phonegap www文件夹中，请使用
/android\u-asset/www/audio/basic/yes.mp3
。

如果您在云中编译构建

只需在index.html中添加以下行

<script type="text/javascript" src="phonegap.js"></script>

<audio id="successSound" src="sounds/sayHello.mp3" type="audio/mpeg" ></audio>
<button onclick="playAudio('successSound')">Play successSound local</button>
注意：无需包含源phonegap.js，同时将添加编译build phonegap.js

在config.xml中还包括媒体插件，如下所示：

如果平台为Android，如果媒体存在于根目录中，则媒体url必须为：
/android_asset/www/test.mp3

我整个星期都在绞尽脑汁，终于让
媒体
开始工作了！有很多问题：

根据Geevan的回答，您的页面上确实需要

第1步：

您需要使用org.apache.cordova.media版本0.2.9或更高版本（我使用的是0.2.11）。在撰写本文时，PhoneGap Build仅支持版本0.2.8。我相信该版本可能已经解决了我的问题

第二步：

版本3.0.0的PhoneGap文档有输入错误，请确保您至少使用了，并确保您的
config.xml
中没有以下输入错误：

<feature name="Media">
    <param name="android-package" value="org.apache.cordova.media.AudioHandler" />
</feature>
并将
添加到
config.xml

第4步：

您需要将“/android\u asset/www/”添加到所有音频文件路径中。例如：

new Media('/android_asset/www/' + src);
第五步：

在设备准备就绪后进行所有音频加载。例如：

document.addEventListener("deviceready", Game.load);
一旦我做了这些改变，我的音频就开始工作了！祝你好运！

Uff这真的很难，让人困惑……但我终于做到了

以下就是我所做的：

index.html

<script type="text/javascript" src="phonegap.js"></script>

<audio id="successSound" src="sounds/sayHello.mp3" type="audio/mpeg" ></audio>
<button onclick="playAudio('successSound')">Play successSound local</button>
}

plataform/android/res/xml.config

<feature name="Media">
        <param name="android-package" value="org.apache.cordova.media.AudioHandler" />
    </feature>
它终于起作用了！！！：D uhuuu

这是一个声音文件路径问题

而不是
/android\u asset/www/audio/AudioFile2.mp3

试一试

我发现您的共享代码中的所有其他设置都是正确的。

这可能是内容安全问题，请尝试在index.html中使用此标题。 在我的测试项目中，包括或不包括它使或中断音频播放和读取本地文件< 
<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" />

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();

<feature name="Media">
        <param name="android-package" value="org.apache.cordova.media.AudioHandler" />
    </feature>

/android_asset/www/default/audio/AudioFile2.mp3

<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://appvipswi.easwi.it; script-src 'self' 'unsafe-inline'; media-src 'self'">

<audio id="a3" controls="controls">
  <source id="s3" src="mp3.audio" type="audio/mp3" />
</audio>