2 Replies Latest reply on Jun 14, 2017 1:14 PM by laudmusic

    WebViewer with javascript in code not working, works when referenced an external script

    laudmusic

      Needs some Web Viewer assistance. I'm trying bring up a page with the html code in a text field. The page loads, but does not execute the javascript on the page. If the javascript is in a separate .js file, the page does work and the script fires properly. My goal is to not have a separate .js file and to have all the code be in one field (and eventually autogenerated by calculation). The exact code that is in the field for the web viewer to generate works perfectly in any web browser, but not in web viewer. Here is the code. I think it has to do with the javascript function section (starts here <script> var ctx )

       

      The same code does work in Safari and other browsers, but not in FM web viewer.

       

      Thanks in advance. I've done all the coding properly and using data type in the web viewer so it renders properly. I think there might be a javascript limitation.

      <!DOCTYPE html>
      <html >
      <head>
      <meta charset="UTF-8">
      <title>Soundcloud Player with Waveform.js and Gif Background</title>

       

      <link rel="stylesheet" href="http://127.0.0.1:8888/audioplayer/css/style.css">


      </head>

      <body>
      <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/…/4.5…/css/font-awesome.min.css">-->
      <link rel="stylesheet" href="http://127.0.0.1:8888/audioplayer/css/font-awesome.min.css">

      <!--<script src="https://wavesurfer-js.org/dist/wavesurfer.min.js"></script>-->
      <script src="http://127.0.0.1:8888/audioplayer/wavesurfer.min.js"></script>

      <!--<link rel="stylesheet" href="https://wavesurfer-js.org/css/ribbon.css">-->
      <link rel="stylesheet" href="http://127.0.0.1:8888/audioplayer/css/ribbon.css">

      <!-- <link rel="stylesheet" href="https://wavesurfer-js.org/css/style.css">-->
      <link rel="stylesheet" href="http://127.0.0.1:8888/audioplayer/css/style.css">


      <div class="demo">
      <div id="waveform">
      <progress id="progress" class="progress progress-striped" value="0" max="100"></progress>
      </div>

      <div class="controls">
      <button class="btn btn-primary" onclick="wavesurfer.skipBackward()">
      <i class="fa fa-step-backward"></i>
      Backward
      </button>

      <button class="btn btn-primary" onclick="wavesurfer.playPause()">
      <i class="fa fa-play"></i>
      Play
      /
      <i class="fa fa-pause"></i>
      Pause
      </button>

      <button class="btn btn-primary" onclick="wavesurfer.skipForward()">
      <i class="fa fa-step-forward"></i>
      Forward
      </button>

      <button class="btn btn-primary" onclick="wavesurfer.toggleMute()">
      <i class="fa fa-volume-off"></i>
      Toggle Mute
      </button>
      </div>
      </div>

      <script>
      var ctx = document.createElement('canvas').getContext('2d');
      var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
      linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
      linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');

      var wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: linGrad,
      progressColor: 'hsla(293, 100%, 50%, 0.5)',
      cursorColor: '#fff',
      normalize: true,
      barWidth: 3
      });

      wavesurfer.on('loading', function (percents) {
      document.getElementById('progress').value = percents;
      });

      wavesurfer.on('ready', function (percents) {
      document.getElementById('progress').style.display = 'none';
      });

      wavesurfer.load('http://127.0.0.1:8888/audioplayer/supergirl.mp3');
      </script>
      </body>
      </html>

        • 1. Re: WebViewer with javascript in code not working, works when referenced an external script
          jbrown

          Afternoon.

          I love using the web viewer, so I was intrigued by the question and the integration.

          I whipped up a demo version of what you're looking for.

           

          A couple of things:

          1. I advocate keeping all the js/html/css files local to the fm file. This allows the content to work without a web connection or all the trappings that come with firewalls. You can see in my sample file the individual fields in the HTML table. They are substituted into the code using placeholders, like "**Data1**". This keeps each file separate and easily-edited but together in a web viewer.

           

          2. To make the audio work I had to embed the audio file in the database. I've an 'audio' table that holds a file and also base64encodes the thing. This can be then read by the web viewer and it will play properly.

           

          To answer your questions:

          I'm not sure that a web viewer can retrieve audio data from a source; it probably can, but I haven't explored that. I use the method described above. Maybe there's some issue with the web viewer being able to get the js, css, and mp3 files. I don't know; i haven't tried that so much.

           

          I just put some basic functionality in here. But now I'm going to play with this all afternoon.

          1 of 1 people found this helpful
          • 2. Re: WebViewer with javascript in code not working, works when referenced an external script
            laudmusic

            Jeremy,

             

            Did you make any headway? Again, I think the issue was the javascript was in the web viewer as opposed to referenced in another .js file.

             

            I think the other alternative is to pass a URL variable to the page that will send to the .js file. Thoughts on that?

             

            Thanks,


            Michael