• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Issues with jplayer integration

Scheduled Pinned Locked Moved Development
10 Posts 3 Posters 1.8k Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    Aries1984 Module Developer
    last edited by Aries1984 Oct 13, 2018, 3:07 PM Oct 13, 2018, 3:04 PM

    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 :(

    S S 2 Replies Last reply Oct 13, 2018, 3:31 PM Reply Quote 0
    • S Offline
      sdetweil @Aries1984
      last edited by Oct 13, 2018, 3:31 PM

      @aries1984 I would open the debug console and see if there are any errors.

      Ctril-shift-i (letter i)

      Select the console table

      Also look at the scripts tab to make sure things are loaded like u expect

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      A 1 Reply Last reply Oct 15, 2018, 4:42 PM Reply Quote 0
      • S Offline
        strawberry 3.141 Project Sponsor Module Developer @Aries1984
        last edited by Oct 14, 2018, 1:50 PM

        @aries1984 In general adding a script in the getDom function isn’t good. It should be done in getScripts similar too:

        Module.register("MMM_Webradio", {
        	defaults: {
        		text: "Playing Radio!"
        	},
        
                getScripts: function() {
                        return [
                                "http://code.jquery.com/jquery-1.11.1.min.js",
                                "http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js",
                                this.file("jPlayer.js");
                        ];
                },
        
        	getDom: function() {
        		var wrapper = document.createElement("div");
        
        		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;
        	}
        });
        

        Be aware of that you most likely need to init your player after the getdom function was executed. Otherwise the player will not find your wrapper. Also as soon as the module gets rerendered, The player most likely need to reinitialized.

        Please create a github issue if you need help, so I can keep track

        A 1 Reply Last reply Nov 1, 2018, 12:23 PM Reply Quote 0
        • A Offline
          Aries1984 Module Developer @sdetweil
          last edited by Oct 15, 2018, 4:42 PM

          @sdetweil said in Issues with jplayer integration:

          @aries1984 I would open the debug console and see if there are any errors.

          Ctril-shift-i (letter i)

          Select the console table

          Also look at the scripts tab to make sure things are loaded like u expect

          Thanks for your hint. I do have indeed errors:

          jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2 Uncaught TypeError: Cannot read property 'fn' of undefined
            at jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2    
            at jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2    
            at jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js:2
          
          :8080/modules/MMM_Webradio/jPlayer.js:1 Uncaught ReferenceError: $ is not defined    
            at :8080/modules/MMM_Webradio/jPlayer.js:1
          

          as I said…it is really strange that exactly the same DOM works in a plain HTML-file perfectly.

          @strawberry-3-141 said in Issues with jplayer integration:

          @aries1984 In general adding a script in the getDom function isn’t good. It should be done in getScripts similar too:

          Module.register("MMM_Webradio", {
          	defaults: {
          		text: "Playing Radio!"
          	},
          
                  getScripts: function() {
                          return [
                                  "http://code.jquery.com/jquery-1.11.1.min.js",
                                  "http://jplayer.org/latest/dist/jplayer/jquery.jplayer.min.js",
                                  this.file("jPlayer.js");
                          ];
                  },
          
          	getDom: function() {
          		var wrapper = document.createElement("div");
          
          		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;
          	}
          });
          

          Be aware of that you most likely need to init your player after the getdom function was executed. Otherwise the player will not find your wrapper. Also as soon as the module gets rerendered, The player most likely need to reinitialized.

          Thanks for that, too. I’ve tried it in the getScripts function already as well. That was my first try. But the 2 scipts need to be loaded before the main script gets excecuted. But I’ll give it another shot.

          S 1 Reply Last reply Oct 15, 2018, 4:47 PM Reply Quote 0
          • S Offline
            sdetweil @Aries1984
            last edited by Oct 15, 2018, 4:47 PM

            @aries1984 the getScripts method is called before getDom(), so they are ‘loaded’ into the browser space.

            you should be able to check that they are loaded with the scripts tab of the debug console window

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            A 1 Reply Last reply Oct 15, 2018, 5:05 PM Reply Quote 0
            • A Offline
              Aries1984 Module Developer @sdetweil
              last edited by Oct 15, 2018, 5:05 PM

              @sdetweil
              jep…got it now via the getScripts method. They are now even loaded in the right order: first jQuery, then jPlayer, then my own script -> leads me to exactly the same errors in the console window.

              1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil
                last edited by Oct 15, 2018, 5:24 PM

                @aries1984 said in Issues with jplayer integration:

                jquery.jplayer.min.js:2 Uncaught TypeError: Cannot read property ‘fn’ of undefined

                see https://stackoverflow.com/questions/10807430/jquery-uncaught-typeerror-cannot-read-property-fn-of-undefined-anonymous-fun
                and
                https://github.com/understrap/understrap/issues/449

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • A Offline
                  Aries1984 Module Developer
                  last edited by Oct 18, 2018, 5:30 PM

                  @aries1984 said in Issues with jplayer integration:

                  jplayer

                  still stuck with the same errors. Replacing ‘$’ with ‘jQuery’ throws the same error saying “jQuery is not defined”.
                  Scripts are definitely loaded in the correct order, too.

                  What really confuses me is that the simple HTML page works perfectly. Any other thoughts? I’ve searched the web for the last 2hrs and could not find a solution, yet…will keep looking, though.

                  1 Reply Last reply Reply Quote 0
                  • A Offline
                    Aries1984 Module Developer
                    last edited by Aries1984 Oct 18, 2018, 5:55 PM Oct 18, 2018, 5:51 PM

                    Right…I’ve downloaded jPlayer now locally and I’m loading the scripts locally. Now the errors are gone but it looks like I’ve made a mistake before when loading them online.

                    Anyway, the errors are now gone but there is still no sound output. As mentioned initially I am quite new to developing a module so I’m really sorry if things seem obvious for you…but belive me, they’re not so obvious for me. But I’m very keen to learn!

                    The jPlayer script I’ve wrote myself looks like this:

                    $(document).ready(function() {
                    
                        var stream = { mp3: "http://media-ice.musicradio.com/CapitalSouthCoastMP3" },
                        ready = false;
                    
                        $("#jquery_jplayer_1").jPlayer({
                            ready: function(event) {
                    		ready = true;
                    		$(this).jPlayer("setMedia", stream);
                    		$(this).jPlayer("play", 1);
                            },
                    
                    	pause: function() {
                    		$(this).jPlayer("clearMedia");
                    	},
                    
                    	error: function(event) {
                    		if(ready && event.jPlayer.error.type ===$.jPlayer.error.URL_NOT_SET) {
                    			// Setup the media stream again and play it.
                    			$(this).jPlayer("setMedia", stream).jPlayer("play");
                    		}
                    	},
                    
                            swfPath: "http://jplayer.org/latest/dist/jplayer",
                            supplied: "mp3",
                    	preload: "none",
                    	volume: 1,	
                    	wmode: "window",
                    	useStateClassSkin: true,
                    	autoBlur: false,
                    	keyEnabled: true,
                    
                        });
                    });   
                    
                    1 Reply Last reply Reply Quote 0
                    • A Offline
                      Aries1984 Module Developer @strawberry 3.141
                      last edited by Nov 1, 2018, 12:23 PM

                      @strawberry-3-141, @sdetweil
                      Thanks for your help and pointing me into the right directions. In the last 2 weeks I made massive steps forward with my first ever module. You’ve helped to get my head round havascript and to understand it better. Thanks!

                      End result can be found here.

                      1 Reply Last reply Reply Quote 0
                      • 1 / 1
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy