Skip to content
Snippets Groups Projects
Select Git revision
  • master
1 result

index.html

Blame
    • BAQ8168's avatar
    Initial commit
    Ferger, Anne authored
    b9ae6295
    History
    BAQ8168's avatar b9ae6295
    History
    Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    index.html 2.85 KiB 
    <!DOCTYPE html>
<html>
 <head>
  <title>Audio Word Cloud</title>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style>
    html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }
  </style> 
 </head>
  <body>
   <div id="container"></div>
    <script>
        anychart.onDocumentReady(function() {
        // code to create a word cloud chart will be here

        anychart.data.loadJsonFile('dataDolganWords.json', function (data) {

        var dataSet = anychart.data.set(data);  

        // create a tag (word) cloud chart
        var chart = anychart.tagCloud();

        // set a chart title
        chart.title('Most frequent words in corpus with their sound');

        // set data with settings
        chart.data(dataSet)
        // set color scale
        // additional empty space in all directions from the text, only in pixels
        // set an array of angles at which the words will be laid out
        chart.angles([0])
        // enable a color range
        chart.colorRange(true);
        // set the color range length
        chart.colorRange().length('80%');

        // format the tooltips
        var formatter = "English translation: {%eng_transl}\nFrequency in corpus: {%value}\nFile for Audio: {%audio_filename}";
        var tooltip = chart.tooltip();
        tooltip.format(formatter);

        //No legend because it always plays the audio
        //chart.legend(true);

        // display the word cloud chart
        chart.container("container");
        chart.draw();

        // add an event listener
        chart.listen("pointClick", function(e){
            var audiourl = e.point.get("audio_file");
            var audio = new Audio(audiourl);
            //var audio = new Audio('audio_files/AkEE_19900810_PearlBeard_flk.mp3');
            var startTime = e.point.get("audio_start");
            var endTime = e.point.get("audio_end");
            audio.currentTime = startTime;
            //audio.currentTime = 0.3;
            audio.play();
            int = setInterval(function() {
                    if (audio.currentTime > endTime) {
                    audio.pause();
                    clearInterval(int);
                }
            }, 3);
         });

});
  });
    </script>
  </body>
</html>