3D可视化本地音频播放效果

3D可视化本地音频播放特效带可视化效果的播放器，单击左上角的按钮以选择本地音频，加载后几秒钟，将出现3D立体声可视化音频播放效果，非常酷炫带可视化效果的播放器，如果您无需再次选择它. 音频文件将在一个循环中播放，如果喜欢，请接受它.

分类: html5>音频难度: 初级

查看演示下载资源: 34个下载资源下载点: 30点

* {
  margin: 0;
  padding: 0;
}
body {
  /*   background: linear-gradient(-135deg, #FC656C, #11879E); */
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.color {
  background: linear-gradient(-45deg, #48dfda, #20a0a4);
}
.black {
  background: #000;
}
.wrapper .file {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid #fff;
  letter-spacing: 0.01em;
  color: #fff;
  cursor: pointer;
  transition: opacity .4s;
  z-index: 2;
}
.wrapper .file:hover {
  opacity: .8;
}
.wrapper .file input {
  display: none;
}
.wrapper canvas {
  vertical-align: bottom;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="wrapper" id="wrapper">
  <label class="file" for="file">
    请选择本地音频文件
    <input id="file" type="file">
  </label>
</div>

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-286125-1.html