AnsweredAssumed Answered

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

Question asked by laudmusic on Jun 10, 2017
Latest reply on Jun 14, 2017 by 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>

Outcomes