wavesurfer+vue实现读取播放音乐展示可拖动进度的频谱效果代码-html代码-BFW代码库

wavesurfer+vue实现读取播放音乐展示可拖动进度的频谱效果代码

代码语言：html

所属分类：多媒体

代码描述：wavesurfer+vue实现读取播放音乐展示可拖动进度的频谱效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
<style>
.fa-circle-thin:before {
  content: "\f1db";
}
.btn-prev,
.btn-next,
.play-pause-btn {
  display: inline-block;
}
.fa-backward {
  margin-left: 0.4em;
  margin-top: 0.1em;
}
.fa-forward {
  margin-left: 0.6em;
  margin-top: 0.1em;
}
.fa-play {
  margin-left: 0.7em;
  margin-top: 0.1em;
}
.playlist .demo-song {
  background-color: #444444;
  color: #fff;
  padding: 1em;
}
.playlist .demo-song.active {
  background-color: #222222;
}
</style>


  
  
</head>

<body>
  

<div id="audio-demos-vuejs">
    <wavesurfer-player layout="modal"></wavesurfer-player>
</div>


<script type="text/x-template" id="player-template">
   <div class="player-template-rootnode">
        <div class="meta-artist">
            <span class="the-artist"></span>
            <span class="the-name"></span>
        </div>

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

        <div class="controls">
            <div class="play-pause-btn play" v-if="layout == 'modal'"  v-on:click="togglePlayPause($event)">
                <span class="fa-stack fa-lg">
                      <i class="fa fa-circle-thin fa-stack-2x"></i>
                      <i class="fa fa-play" aria-hidden="true"></i>
                </span>
            </div>
            <div class="btn-prev" v-on:click="playPrev()">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle-thin fa-stack-2x"></i>
                  <i class="fa fa-backward" aria-hidden="true"></i>
                </span>
            </div>
            <div class="btn-next" v-on:click="playNext()">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle-thin fa-stack-2x"></i>
                  <i class="fa fa-forward" aria-hidden="true"></i>
                </span>
            </div>
        </div>

        <div class="playlist" v-for="source in sources">
            <div class="demo-song" v-bind:class="{active: source.isActive}">
                <div class="demo-title"><b>{{source.title}}</b></div>
                <div class="artist-name">{{source.name}}</div>
                <div class="demo-src">{{source.src}}</div>
                <div class="demo-desc"></div>
            </div>
        </div>
    </div>
</script>

  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/wavesurfer.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquer.........完整代码请登录后点击上方下载按钮下载查看