将带有 Javascript 的音频文件添加到 AmCharts

Question

我用 Amchart 的实时编辑器创建了一个图表（x-y 图），我想向图表添加一个声音文件（如声音播放器）。该图表表示声音文件，因此 'player' 时间位置将对应于图表中 x 轴上的位置。我希望这些在视觉上匹配，并且可单击字段会更改声音文件中的时间以扩展到图表中（就像如果正在播放声音文件并且您想回到 20 秒，您可以单击左侧玩家，也就是图中的 x=20）

Amcharts 允许使用 JavaScript 进行自定义，所以这是我认为最适合与声音文件集成的语言。如果一个视频也能像后台播放的那样集成视频，那也很酷，但没必要添加。

Answer 1

如果您的 category/x-axis 存储为毫秒，您可以利用音频（或视频）标签的 timeupdate 事件并调用图表 chartCursor 中的 showCursorAt 方法具有新时间戳的对象。不过，您需要使用序列图表才能利用 showCursorAt 方法。

HTML

<div id="chartdiv"></div>
<audio id="chart-audio" src="/path/to/audio/source"  preload="auto" controls>
</audio>

JavaScript

AmCharts.useUTC = true; //needed for millisecond timestamps
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "y": <value>,
    "x": 0
  }, {
    "y": <value>,
    "x": 1000
  }, {
    "y": <value>,
    "x": 2000
  }, {
    "y": <value>,
    "x": 3000
  }, 
  // .. continue until you have the full length of the song in milliseconds
  ],
  // other config ..
  "categoryField": "x",
  "categoryAxis": {
    "parseDates": true,
    "boldPeriodBeginning": false,
    "dateFormats": [{
      "period": "fff",
      "format": "JJ:NN:SS"
    }, {
      "period": "ss",
      "format": "JJ:NN:SS"
    }, {
      "period": "mm",
      "format": "JJ:NN::SS"
    }, {
      "period": "hh",
      "format": "JJ:NN:SS"
    }, {
      "period": "DD",
      "format": "MMM DD"
    }, {
      "period": "WW",
      "format": "MMM DD"
    }, {
      "period": "MM",
      "format": "MMM"
    }, {
      "period": "YYYY",
      "format": "YYYY"
    }],
    "equalSpacing": true,
    "minPeriod": "ss"
  },
  "chartCursor": {
    "categoryBalloonDateFormat": "JJ:NN:SS",
  }
});

var audio = document.getElementById('chart-audio');

audio.addEventListener("timeupdate", function(e) {
  chart.chartCursor.showCursorAt(new Date(Math.floor(e.target.currentTime * 1000)));
});

Demo

编辑

您也不一定限于毫秒。如果您有办法将媒体标签的 currentTime 属性映射到图表中的适当类别，您也可以这样做：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "y": 1,
    "measure": 1
  }, {
    "y": 2,
    "measure": 2
  }, {
    "y": 3,
    "measure": 3
  }, {
    "y": 4,
    "measure": 4
  } ],
  "graphs": [{
    "balloonText": "[[category]]: [[value]]",
    "bullet": "circle",
    "valueField": "y",
  }],
  "categoryField": "measure",
  "chartCursor": { },
});

var audio = document.getElementById("chart-audio");

audio.addEventListener("timeupdate", function(e) {
  var measure;
  var currentTime = e.target.currentTime;
  if (currentTime <= 8) {
    measure = 1;
  }
  else if (currentTime <= 16) {
    measure = 2;
  }
  else if (currentTime <= 24) {
    measure = 3;
  }
  else {
    measure = 4;
  }

  chart.chartCursor.showCursorAt(measure);
});

Demo

将带有 Javascript 的音频文件添加到 AmCharts

adding an audio file with Javascript to AmCharts

javascript

audio

amcharts