Hi everybody,
this is my first module I am trying to develop so please forgive me if I might ask some stupid questions.
First: I’ve spent now about 10 hrs and read several examples about jplayer, read through some modules, read the developer help about the modules, read some forum posts here…so basically…a lot of reading which helped a lot already and I thought I was nearly there but now I am kind of stuck.
The script currently looks like that:
Module.register("MMM_Webradio", {
defaults: {
text: "Playing Radio!"
},
getDom: function() {
var wrapper = document.createElement("div");
var jquery = document.createElement("script");
jquery.setAttribute("type", "text/javascript");
jquery.setAttribute("src", "http://code.jquery.com/jquery-1.11.1.min.js");
wrapper.appendChild(jquery);
var jplayer = document.createElement("script");
jplayer.setAttribute("type", "text/javascript");
jplayer.setAttribute("src", "http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js");
wrapper.appendChild(jplayer);
var ownScript = document.createElement("script");
ownScript.setAttribute("type", "text/javascript");
ownScript.setAttribute("src", "modules/MMM_Webradio/jPlayer.js");
wrapper.appendChild(ownScript);
var displayedText = document.createElement("div");
displayedText.innerHTML = this.config.text;
displayedText.setAttribute("id", "jquery_jplayer_1");
displayedText.setAttribute("class", "jp-jplayer");
wrapper.appendChild(displayedText);
return wrapper;
}
});
which leads to the following in MagicMirror:
<div class="region bottom right">
<div class="container" style="display: block;">
<div id="module_1_MMM_Webradio" class="module MMM_Webradio MMM_Webradio">
<div class="module-content">
<div>
< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
< script type="text/javascript" src="http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js"></script>
< script type="text/javascript" src="modules/MMM_Webradio/jPlayer.js"></script>
< div id="jquery_jplayer_1" class="jp-jplayer">Playing Radio!</div>
</div>
</div>
</div>
</div>
</div>
I do get the text “Playing Radio!” displayed but no sound is played.
Whilst developing I’ve always double checked what I am doing by creating a simple HTML site. The following HTML site plays the webradio absolutely fine:
<div>
< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
< script type="text/javascript" src="http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js"></script>
< script type="text/javascript" src="jPlayer.js"></script>
< div id="jquery_jplayer_1" class="jp-jplayer">Playing Radio!</div>
</div>
so…what am I missing here? I can’t spot the difference :( To me it looks exactly the same :(