0

感谢您的关注。

我不是程序员，我只是设法拼凑出一个简单的原理证明“应用程序”（使用一点 html、jquery 和 javascript）和几页、一点文本、一张图片和一段音频片段。

但是，我还需要从一个页面滑动到另一个页面，并且在使用单独的 html 文件时遇到了问题。最后，我设法通过在一个索引文件中使用 3 个“页面”来很好地刷卡（欢呼），但随后音频中断（嘘） - 注意：它在单独的 html 文件中完美运行。

我认为三个相同的音频脚本（每个“页面”上一个）具有相同的函数名称肯定存在问题，所以我将它们更改为唯一的。它仍然没有工作。我也尝试更改var名称，没有骰子。

任何人都可以提出一个可以解决它的调整吗？我确信这很简单，但我被卡住了。

这是我的索引页面：

<!DOCTYPE html> 
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>HELLO</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-    1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

<!-- set page swipes -->


<script>
<!--
$('div.ui-page').live("swipeleft", function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function(){
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide",
reverse: true}, true, true);
}
});
// -->
</script>

</head> 

<body> 





<!-- Page 1 -->





<div data-role="page" id="home">

<div data-role="header"  data-theme="b">
    <h1>Bok!</h1>
</div><!-- /header -->

<div data-role="content" align="center">    


<img src="Aron_pic.png" width="170" height="170" alt="Lovely boy"></a><br>
<br><br>


<!--  audio script -->


<button onclick="playHi('hi.mp3')">Hi!</button>

<script src="phonegap.js"></script>
<script>
    function playHi(src) {
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
        }

        var media = new Media(src, success, error_error);

        media.play();
    }

    function success() {
        // ignore
    }

    function error_error(e) {
        alert('Error: check URL');
        alert(e.message);
    }
</script>

<!-- ???? -->




</div><!-- /end body content -->




</div><!-- /end page 1 -->








<!--  page 2 -->











<div data-role="page" id="goodbye">

<div data-role="header"  data-theme="b">
    <h1>Dovizenja!</h1>
</div>


<div data-role="content" align="center">    


<img src="Aron_pic.png" width="170" height="170" alt="Lovely boy"></a><br>
<br><br>



<!-- AUDIO FUNCTION -->
<button onclick="playBye('goodbye.mp3')">Goodbye!</button>

<script src="phonegap.js"></script>
<script>
    function playBye(src) {
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
        }

        var media = new Media(src, success, error_error);

        media.play();
    }

    function success() {
        // ignore
    }

    function error_error(e) {
        alert('Error: check URL');
        alert(e.message);
    }
    </script>

</div><!-- / end body content -->


</div><!-- /end page 2 -->






<!-- new page 3 -->







<div data-role="page" id="thankyou">

<div data-role="header"  data-theme="b">
    <h1>Hvala!</h1>
</div>


<div data-role="content" align="center">    


<img src="Aron_pic.png" width="170" height="170" alt="Lovely boy"></a><br>
<br><br>



<!-- AUDIO FUNCTION -->


<button onclick="playThanks('thankyou.mp3')">Thank you!</button>

<script src="phonegap.js"></script>
<script>
    function playThanks(src) {
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
        }

        var media = new Media(src, success, error_error);

        media.play();
    }

    function success() {
        // ignore
    }

    function error_error(e) {
        alert('Error: check URL');
        alert(e.message);
    }
    </script>

</div><!-- / end body content -->



</div><!-- /end page 3 -->

</body>
</html>
4

0 回答 0