phonegap 4.0媒体插件ReferenceError:未定义媒体

时间:2015-02-06 10:29:44

标签: javascript cordova audio

我对编程很新,我正在尝试构建我的第一个phonegap应用程序。我正在尝试播放位于my / www / sounds /文件夹中的一些声音。但是,当我在浏览器中运行index.html(chrome)时,我得到'未捕获的ReferenceError:媒体未定义'错误。

这是我的HTML:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="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/index.css" />
    <!--jQuery mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript" src="cordova.js"></script>
   <script type="text/javascript" src="js/index.js"></script>
</head>
<body>


<div id="files-list-page" data-role="page">
    <header data-role="header">
        <h1>Fragmenten</h1>
    </header>
    <div data-role="content">
        <ul id="files-list" data-role="listview" data-autodividers="true" data-filter="false" data-split-icon="delete">
            <audio id="fr1" src="sounds/5euros.mp3" type="audio/mp3" ></audio>
        </ul>
        <button id="btn1" class=ui-btn" onclick="playAudio('sounds/5euros.mp3')">Play</button>
    </div>
    <footer data-role="footer">
        <h3 id="copyright-title">Soundboard</h3>
    </footer>
</div>

</body>

这是我的JS:

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
}


};

app.initialize();


// Play audio
//
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();
}

我的config.xml:

    <?xml version='1.0' encoding='utf-8'?>
<widget id="com.martijn.HuisbaasBob" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HuisbaasBob</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

任何建议都会有很大的帮助,提前谢谢!

1 个答案:

答案 0 :(得分:0)

您需要在ur config.xml中添加此行以使插件正常工作...

(在app / res / xml / config.xml中)

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

“未捕获的ReferenceError:媒体未定义”表示您的代码无法识别它...意思是“未配置”