gpt4 book ai didi

javascript - phonegap - 从本地资源播放 html5 音频

转载 作者:行者123 更新时间:2023-11-28 03:52:00 24 4
gpt4 key购买 nike

我构建了一个简单的演示应用程序,可以播放本地存储的 mp3 文件(作为应用程序的一部分提供)。我想使用 html5-audio 而不是 phonegap 的媒体对象。我正在使用 howler.js 框架来获得更好的性能。

本地文件存储在www/res/audio/2.mp3下。

在我的桌面浏览器上运行时一切正常。但是,当部署到我的 android 设备时,我无法让它工作。奇怪的是:远程托管的 mp3 文件的播放效果非常好,因此我认为我在本地文件中使用的 url 有问题。我尝试了不同的 url-“版本”,但以下均无效:

www/res/audio/2.mp3
/android_asset/www/res/audio/2.mp3
file:///android_asset/www/res/audio/2.mp3
file://android_asset/www/res/audio/2.mp3

http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3 //works great

这让我发疯。任何想法如何让它工作以及我的错误是什么?请在下面查看我的代码或 download my entire code here .

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />

<title>Audio-Test</title>
</head>
<body>
<!-- ------------- -->
<!-- Script import -->
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>

<script src="js/libs/howler/howler.min.js"></script>

<script src="js/index.js"></script>

<!-- ---------- -->
<!-- Start Page -->

<div id="index" data-role="page" data-theme="a">
<!-- HEADER, FOOTER -->
<div data-role="header" data-position="fixed">
<h1>Audio-Tester</h1>
</div>

<!-- CONTENT -->
<div class="ui-content">
<h1 id='ready' style='text-align: center;'></h1>

<select id='urls'></select>
<button id='playSelected'>Play audio from selected source!</button>

<div id='log'></div>
</div>
</div>

<!-- ------------- -->
<!-- Init Phonegap -->
<script>
$(document).ready(function() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
isPhonegap = true;

$.getScript( 'cordova.js', function() {
document.addEventListener("deviceready", onDeviceReady, false);
app.initialize();
});
}
else {
//Fallback for desktop browsers!
isPhonegap = false;
onDeviceReady();
}
});
</script>
</body>
</html>

index.js

function onDeviceReady() {
$('#ready').html("I'm ready!");

//populate selection
var basePath = getBasePath();
var audioUrl = 'res/audio/2.mp3';

var myOptions = {
val1 : 'http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3',
val2 : audioUrl,
val3 : basePath + audioUrl,
val4 : 'file://' + basePath + audioUrl,
val5 : 'file:/' + basePath + audioUrl
};

var urls = $('#urls');
$.each(myOptions, function(val, text) {
urls.append(
$('<option></option>').val(val).html(text)
);
});

//append listener to button
$('#playSelected').click(function() {
var myHowl = new Howl({ urls: [$('#urls option:selected').text()] });
myHowl.play();

$('#log').html($('#log').html() + '<br /> Playing ' + myHowl.urls());
});
}

function getBasePath() {
var htmlFilename = 'index.html';
var path = window.location.pathname;
path = path.substr(0, path.length - htmlFilename.length);

return path;
}

最佳答案

此代码适用于 phonegap。

  <body>

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>

关于javascript - phonegap - 从本地资源播放 html5 音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25358169/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com