laudmusic

Webviewer HTML calculation not working

Discussion created by laudmusic on Jul 25, 2017
Latest reply on Jul 29, 2017 by beverly

Hello,

 

Using FileMaker 16 Advanced.

 

Having a real issue with getting this HTML to render and work properly. It works perfectly if I load it as a html file from a server, but when I copy the html code and add the \" to the quotes, it doesn't work. Am I missing something since it has javascript? I've been able to do this before with just amending the ".

 

Any help would be wonderful.

 

Here's a link to the link to load into a web viewer so you know the functionality:

 

http://createyourfreesite.com/web/michael/player/

 

Here's the code to paste into you web viewer.

 

"data:text/html,"

&

"<!DOCTYPE html>

<html>

<head>

<meta charset=\"UTF-8\">

<title>Title of the document</title>

<link href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\" rel=\"stylesheet\">

<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css\" />

<link rel=\"stylesheet\" href=\"http://createyourfreesite.com/web/michael/player/css/style.css\" />

<link rel=\"stylesheet\" href=\"http://createyourfreesite.com/web/michael/player/css/ribbon.css\" />

<link rel=\"screenshot\" itemprop=\"screenshot\" href=\"https://katspaugh.github.io/wavesurfer.js/example/screenshot.png\" />

<!--<link rel=\"stylesheet\" href=\"https://wavesurfer-js.org/css/ribbon.css\" />

<link rel=\"stylesheet\" href=\"https://wavesurfer-js.org/css/style.css\" />-->

<link rel=\"stylesheet\" href=\"http://createyourfreesite.com/web/michael/player/css/style.css\" />

<!-- wavesurfer.js -->

<script src=\"http://createyourfreesite.com/web/michael/player/js/wavesurfer.min.js\"></script>

<script src=\"http://createyourfreesite.com/web/michael/player/js/plugin/wavesurfer.regions.min.js\"></script>

<script src=\"http://createyourfreesite.com/web/michael/player/js/plugin/wavesurfer.timeline.min.js\"></script>

<!-- App -->

<!--<script src=\"js/app.js\"></script>-->

</head>

<body>

<div id=\"waveform\"><span id=\"demo-message\">No Music loaded. Clcik on button to load music</span></div>

<div id=\"waveform-timeline\"></div>

<div style=\"text-align: center\">

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

    <button class=\"btn btn-primary\" onclick=\"loadMusic('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 1 </button>

  <button class=\"btn btn-primary\" onclick=\"loadMusic('http://createyourfreesite.com/web/michael/player/music/media.wav')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 2 </button>

  <button class=\"btn btn-primary\" onclick=\"loadMusic('http://createyourfreesite.com/web/michael/player/music/demo.wav')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 3 </button>

  <button class=\"btn btn-primary\" onclick=\"loadMusic('http://192.168.25.254/Audio/NineDays/TheMaddingCrowd/AbsolutelyStoryOfAGirl_17775.mp3')\"> <i class=\"glyphicon glyphicon-play\"></i> Load Music 4 </button>

</div>

 

 

<script language=\"javascript\" type=\"text/javascript\">

  var regionsData = {};

 

  // init wavesurfer

  var wavesurfer = WaveSurfer.create({

   container: '#waveform',

   waveColor: '#337ab7',

   progressColor: '#47cf73',

   autoCenter: false,

   minPxPerSec: 10,

  });

 

  // set initial volume level

  wavesurfer.setVolume(Number(slider.value) / 100);

 

 

 

 

  // event ready

  wavesurfer.on('ready', event => {

  wavesurfer.enableDragSelection({});

 

  var timeline = Object.create(WaveSurfer.Timeline);

 

  timeline.init({

  wavesurfer: wavesurfer,

  container: '#waveform-timeline'

  });

  });

 

 

 

  var updateRegionInStore = addRegionToStore;

 

 

 

  // add new region on timecursor position

  function loadMusic(music_file) {

  // load audio

  document.getElementById('demo-message').style.display = \"none\";

  wavesurfer.load(music_file);

 

 

  }

 

 

  function setTimeForRegion(region) {

  var div = document.createElement('div');

  div.innerHTML = region.element.getAttribute('title');

  var playRegion = region.element.appendChild(div);

 

  div.className = \"icon-region region-time\";

  }

 

  function updateTimeForRegion(region) {

  var time = region.element.getAttribute('title');

  region.element.querySelector('.region-time').innerHTML = time;

  }

 

 

  function handleCollisions() {

  var allKeys = Object.keys(regionsData);

  var collisionsArr = getCheckArr(allKeys);

 

  console.log(allKeys.length)

 

  allKeys.forEach(function(region) {

  regionsData[region].element.classList.remove('collision-region');

  });

 

  collisionsArr.forEach(function(region) {

  regionsData[region].element.classList.add('collision-region');

  });

 

  console.log(getCheckArr(allKeys))

  }

 

  function isCollide(my, other) {

  return !(

  ((my.start + my.end - my.start) < other.start) ||

  (my.start > (other.start + other.end - other.start))

  );

  }

 

  wavesurfer.on('region-update-end', event => {

  updateRegionInStore(event);

 

  console.log('regionsData', regionsData);

  });

 

  wavesurfer.on('region-updated', event => {

  handleCollisions();

  updateTimeForRegion(event);

  });

 

  function getCheckArr(allKeys) {

  var collisions = [];

  console.log(collisions)

  allKeys.forEach(function(key) {

  allKeys.forEach(function(otherKey) {

  if (key !== otherKey) {

  if (isCollide(regionsData[key], regionsData[otherKey])) {

  collisions.push(otherKey); 

  }

  }

  });

  });

 

  return collisions;

  }

 

  wavesurfer.on('region-in', event => {

  // console.log(event);

  });

 

  wavesurfer.on('region-created', event => {

  // console.log(event);

 

  setDeleteForRegion(event);

  setTimeForRegion(event);

  addRegionToStore(event);

  });

 

  wavesurfer.on('region-out', event => {

  // console.log(event);

  });

 

  wavesurfer.on('region-removed', event => {

  console.log(event);

  handleCollisions();

  });

 

 

</script>

</body>

</html>

"

Outcomes