wavesurfer.spectrogram实现读取音频文件获取带有频率标签的频谱图效果代码-html代码-BFW代码库

wavesurfer.spectrogram实现读取音频文件获取带有频率标签的频谱图效果代码

代码语言：html

所属分类：图表

代码描述：wavesurfer.spectrogram实现读取音频文件获取带有频率标签的频谱图效果代码

代码标签： wavesurfer spectrogram 读取音频文件获取频率标签频谱图

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

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

  
  
  
<style>
body{
  font: 15px helvetica,arial,freesans,clean,sans-serif;
  margin: 20px auto;    
  text-align: center;
  max-width: 900px;
}
#waveform{
  width: 100%;
  background: rgba(0,0,0,0.8);
}
#wave-spectrogram{
  margin: 10px auto;
  position: relative;
}
#wave-spectrogram canvas{
  left: 0;
}

#specLabels{
    position: absolute!important;
}

button{
  background: #eee;
  border: 1px solid #ddd;
  border-bottom: 4px solid #ccc;
  cursor: pointer;
  font-size: 20px;
  margin-top: 10px;
  padding: 10px;
}
button:active{
  outline: none;
  border-top: 4px solid #eee;
  border-bottom: 2px solid #777;
}
button:focus{
  outline: none;
}
</style>

  
  
</head>

<body>
  <h1>WaveSurfer.js - spectrogram with frequency labels</h1>
<h4>
  <a target="_blank" href="https://github.com/entonbiba/wavesurfer-spectrogram-with-frequency-labels">Example reference on github.com</a>
</h4>

<div id="waveform"></div>

<div.........完整代码请登录后点击上方下载按钮下载查看