I am fairly new to programming, and I am trying to build my very first phonegap app. I am trying to play some sounds which are located in my /www/sounds/ folder. However, when I am running index.html in my browser (chrome) I get the 'Uncaught ReferenceError: Media is not defined" error.
This is my 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://ift.tt/1wORPGp">
<script src="http://ift.tt/13jmVM7"></script>
<script src="http://ift.tt/1toXtPU"></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>
And this is my 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();
}
My config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.martijn.HuisbaasBob" version="0.0.1" xmlns="http://ift.tt/18Fk3Vk" xmlns:cdv="http://ift.tt/1cHnIYX">
<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>
Any suggestions would be of great help, thanks in advance!
Aucun commentaire:
Enregistrer un commentaire