2015-02-06 46 views
1

我是相當新的編程,我正在嘗試構建我的第一個phonegap應用程序。我試圖播放位於我的/ www/sounds /文件夾中的一些聲音。然而,當我在我的瀏覽器(Chrome)中運行的index.html我得到了「未捕獲的ReferenceError:媒體沒有定義」錯誤phonegap 4.0媒體插件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="[email protected]" href="http://cordova.io"> 
     Apache Cordova Team 
    </author> 
    <content src="index.html" /> 
    <access origin="*" /> 
</widget> 

任何建議將有很大的幫助,提前謝謝!

+0

你安裝了媒體插件嗎? – 2015-02-06 10:33:57

+0

是的,我使用CLI:cordova plugin add org.apache.cordova.media – Martijn 2015-02-06 10:39:24

+0

檢查「config.xml」是否配置正確。或只是分享你的config.xml – 2015-02-06 10:40:48

回答

0

您需要在烏爾config.xml中添加此行讓你的插件工作...

(在app/RES/XML/config.xml中)

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

「未捕獲ReferenceError:Media is not defined「意思是你的代碼無法識別它......意思是」未配置「

+0

嘿,那沒辦法。還是應該先嚐試構建應用程序? – Martijn 2015-02-06 11:13:29

+0

那你跑哪裏了?在電腦瀏覽器? – 2015-02-06 11:18:24