A first pass at rendering wavesurfer.js annotations as WEBVTT

json2webvtt.js

var sample = [
  {
    "start": 2.7,
    "end": 4.1,
    "data": {}
  },
  {
    "start": 6,
    "end": 8.2,
    "data": {}
  },
  {
    "start": 8.6,
    "end": 12.2,
    "data": {
      "note": "libravox no roudouku wa, subete paburikku domain desu"
    }
  },
  {
    "start": 12.8,
    "end": 16.2,
    "data": {}
  },
  {
    "start": 17.8,
    "end": 18.6,
    "data": {
      "note": "羅生門"
    }
  },
  {
    "start": 19.19,
    "end": 20.5,
    "data": {
      "note": "芥川龍之介"
    }
  },
  {
    "start": 22.5,
    "end": 24.5,
    "data": {
      "note": "ある日の暮方の事である。"
    }
  },
  {
    "start": 25.19,
    "end": 26.3,
    "data": {
      "note": "一人の下人げにんが、"
    }
  },
  {
    "start": 26.8,
    "end": 28,
    "data": {
      "note": "羅生門らしょうもんの下で"
    }
  }
]


var WebVTT = function(json){
  this.formatTimestamp = function(seconds){
    var sec_num = parseInt(seconds, 10); 
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);
    var milliseconds = parseFloat(seconds, 10) - sec_num * 1000; 

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
  }
 
  this.annotation2cue = function(annotation) {
    var timestamp = '',
        content = '';
    timestamp = this.formatTimestamp(annotation.start) + ' --> ' + this.formatTimestamp(annotation.end);
    if( annotation.data.note){
      content = annotation.data.note;
    }
    return timestamp + '\n' + content + '\n\n';
  }
  
  this.convert = function(){ 
    var self = this;
    var webvtt = 'WEBVTT\n\n';
    json.forEach(function(annotation){
      webvtt += self.annotation2cue(annotation)
    })
    return webvtt;
  }
}

console.log(new WebVTT(sample).convert())

Just a very rough 20 minute hack that doesn’t really work right…

• I haven’t figured out the milliseconds math/rendering business yet. (WebVTT demands hh:mm:ss.ssss)
• I suppose the { "data" : { "note" : "…something…"}} structure implies that in the future data could be more complex. I’ve not thought about how to support that.

Does the general approach look ok to you?

Looks nice!

On line 91 it could be

webvtt + json.map(this.annotation2cue, this).join('\n')

I think wavesurfer's time stamps is seconds.decimal, but it seems your math is assuming milliseconds.fraction?

Hello Katspaugh,

I am using wavesurfer.js for my project. It is awesome to work with wavesurfer.js. :-)

My project is where once the user uploads the audio file and CSV file having the annotation details in it, creates the waveform and displays the saved annotations. I am using your tool for creating audio waveform (wavesurfer.load) and for annotation, right now, converting CSV file which includes start, end and the respective annotation (for that start and end timings) to JSON format via PHP. I have got the result something like this (please see below), but if I feed this into the wavesurfer.js (referred from annotation tool, http://wavesurfer-js.org/example/annotation/), it is not showing the saved annotations which I have in JSON file. In the wavesurfer.js, as I observed,it is in nested JSON format (from annotation tool example: {"start":12.8,"end":16.2,"data":{}},{"start":"17.8","end":"18.6","data":{"note":"羅生門"}},{"start":"19.19","end":"20.5","data":{"note":"芥川龍之介"}} ).

My JSON output format from PHP is something like this: [{"start":"1.2","end":"1.4","data":"","note":"first"},....other..values..,{"start":"3.5","end":"3.8","data":"","note":"last"}] but the output should be in the form of
[{"start":"1.2","end":"1.4","data":{"note":"first"}},......other...values..,{"start":"3.5","end":"3.8","data":{"note":"last"}}](as you can observe that in the required format of JSON, there is nested JSON "data":{"note":"first"}, which I could not create from CSV).

Please guide me how can I generate nested JSON or is there any other possibility to use other than JSON format to save/alter annotations in the tool.

Sorry for the lengthy query. Please let me know about this at the earliest.
Thank you. Happy wavesurfing!! :-)