How to add div to datatable

I would like to know whether it is possible to add a canvas to a datatable.

I have installed the datatable responsive plugin which, in case the column is too width, clicking a button will allow you to see extra information.

I would like to know whether I can add a canvas to the hidden area in order to play an audio which correspond to the selected row. I wish to use a nice audio player called wavesurfer.js

To be able to do do that I need to learn the following:

How to add a canvas at the end of the hidden area
How to force the responsive table to not display the canvas in case the table has enough space
The canvas has to fill the hidden div 100%

Picture of what I am trying to achieve (Each row is an audio file)

Please see the following for your information

<div id="demo">
   <div id="waveform">
      <div class="progress progress-striped active" id="progress-bar" style="display: none;">
         <div class="progress-bar progress-bar-info" style="width: 100%;"></div>
      </div>
      <wave style="display: block; position: relative; -webkit-user-select: none; height: 128px; overflow-x: auto; overflow-y: hidden;"><canvas width="870" height="128" style="position: absolute; z-index: 1; top: 0px; bottom: 0px; width: 870px;"></canvas><wave style="position: absolute; z-index: 2; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right-style: solid; border-right-width: 1px; border-right-color: navy;"><canvas width="870" height="128" style="width: 870px;"></canvas></wave></wave>
   </div>
</div>

https://jsfiddle.net/h26cxgc8/

Use the format() method in the child rows example provided in comments. You can modify format to return a div into which probably you can create a canvas using wavesurfer.js

function format(d) {
  return '<div class="player"></div>';
}
var table = $('#example').DataTable({
  "columns": [{
    "className": 'details-control',
    "orderable": false,
    "data": null,
    "defaultContent": '+'
  }, {
    "data": "Name"
  }, {
    "data": "Position"
  }, {
    "data": "ID"
  }]
});
$('#example tbody').on('click', 'td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  if (row.child.isShown()) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    row.child(format(row.data())).show();
    tr.addClass('shown');
  }
});

Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/