above is an audio plug-in wavesurfer.js. There is a gray progress bar below. Now click anywhere in the progress bar to create a div (red circle area) at the current location. Click x to delete the div, and drag the two-way arrow to drag back and forth, as shown. I am now writing the result is to click on any location to show only one is stacked together, how to solve?
specific results can be found on the website
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/default.css">
<style>
.waveform-cont {
width: 900px;
margin: auto;
overflow: auto;
height: 240px;
border: 1px solid -sharpccc;
padding-top: 40px;
border-radius: 3px;
}
.waveform {
border-bottom: 1px solid -sharpccc;
border-top: 1px solid -sharpccc;
height: 128px;
overflow: hidden;
line-height: 128px;
}
.waveform-main {
border-radius: 15px;
height: 15px;
background: -sharpeee;
cursor: pointer;
margin-top: 5px;
position: relative;
}
.waveform-main b {
position: absolute;
width: 0;
height: 15px;
right: 0;
bottom: 0;
left:0;
/* border-radius: 15px; */
background: rgba(0, 255, 0, 0.4);
}
.waveform-main div {
height: 15px;
width: 100%;
position: relative;
z-index: 8;
}
.waveform-main-div {
position: relative;
height: 0;
}
.data-val {
margin: 10px auto 0 auto;
border-left: 1px solid -sharpccc;
border-right: 1px solid -sharpccc;
border-top: 1px solid -sharpccc;
overflow: auto;
max-height: 280px;
position: relative;
}
.data-val-role {
min-height: 52px;
border: 1px solid -sharpccc;
margin-bottom: 10px;
line-height: 50px;
padding: 0 10px;
}
.waveform-log {
position: absolute;
width: 0;
left: 0;
top: 0;
z-index: 90;
}
.waveform-cont .tag1 {
width: 38px;
height: 17px;
border: 1px solid -sharp09F;
position: absolute;
background-color: -sharpFFF;
left: -19px;
top: 5px;
line-height: 15px;
font-size: 10px;
color: -sharp333;
text-align: center;
overflow: hidden;
padding: 0;
border-radius: 3px;
cursor: pointer;
}
.waveform-cont .tag2 {
width: 38px;
height: 17px;
border: 1px solid -sharp00d727;
position: absolute;
background-color: -sharp00d727;
left: -19px;
top: -184px;
line-height: 15px;
font-size: 10px;
color: -sharpfff;
text-align: center;
overflow: hidden;
padding: 0;
border-radius: 3px;
}
.waveform-cont .tag2 {
border: 1px solid -sharpfff !important;
}
.waveform-log .line-add {
position: absolute;
width: 1px;
height: 150px;
left: 0;
bottom: 0;
background: -sharp0f0;
}
.waveform-log .icon-times {
position: absolute;
width: 15px;
height: 15px;
border-radius: 15px;
left: -7px;
bottom: 150px;
background: -sharpf00;
color: -sharpfff;
text-align: center;
line-height: 14px;
font-size: 8px;
cursor: pointer;
}
.waveform-log .icon-arrows-h {
position: absolute;
width: 15px;
height: 15px;
border-radius: 15px;
left: -7px;
bottom: 0;
background: -sharp9a9a9a;
color: -sharpfff;
text-align: center;
line-height: 14px;
font-size: 8px;
z-index: 10;
cursor: pointer;
}
.icon-times:after {
content:"\2716";
display: block;
}
.icon-arrows-h::after{
content:"\2194";
display: block;
font-size:15px;
margin:-1px auto;
}
</style>
</head>
<body>
<div style="width: 900px;margin:20px auto">
<div class="waveform-cont" mlength="25.26">
<div class="waveform" id="waveform" style="width: 1136.7px;"></div>
<div class="waveform-main" style="width: 1136.7px;">
<b></b>
<div></div>
</div>
<div class="waveform-main-div" id="waveform-main-div" style="width: 1136.7px;">
<!-- <div class="waveform-log log-1">
<div class="tag1"></div>
<div class="tag2"></div>
<span class="line-add"></span>
<span class="icon-times"></span>
<span class="icon-arrows-h"></span>
</div> -->
</div>
</div>
<ul class="data-val"></ul>
<div class="data-val-role"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script>
$(function(){
var wavesurfer = WaveSurfer.create({
container: "-sharpwaveform",
waveColor: "-sharp006699",
progressColor: "-sharp009999",
cursorColor:"red",
barHeight:"0.5"
});
var i=false;
$("-sharpwaveform").click(function(){
i=!i;
if(i){
wavesurfer.play();
}else{
wavesurfer.stop();
}
})
wavesurfer.load("HoldOn.mp3");
var statu = false,
ox = 0,
lx = 0,
left = 0,
bgleft = 0;
// var num=1;
$(".waveform-main").on("click",function(e){
var num=$(".waveform-main").data("num");
num =num ? num : 1;
var str="<div class="waveform-log log-"+num+"" data-val=""+num+"">"+
"<div class="tag1">"+num+"</div>"+
"<div class="tag2"></div>"+
"<span class="line-add"></span>"+
"<span class="icon-times"></span>"+
"<span class="icon-arrows-h"></span>"+
"</div>";
if(!statu){
bgleft = $(".waveform-main").offset().left;
left = e.pageX - bgleft;
if(left < 0){
left = 0;
}
if(left > 1136.7){
left = 1136.7;
}
$(str).appendTo(".waveform-main-div");
num+=1;
$(".waveform-main").data("num",num);
$(".waveform-log").css("left",left);
$(".waveform-main b").width(left);
}
$(".icon-arrows-h").mousedown(function(e){
lx = $(this).offset().left;
ox = e.pageX - left;
statu = true;
});
$(document).mouseup(function(){
statu = false;
});
$(".waveform-cont").mousemove(function(e){
if(statu){
left = e.pageX - ox;
// left = e.pageX - bgleft;
if(left < 0){
left = 0;
}
if(left > 1136.7){
left = 1136.7;
}
$(".waveform-log").css("left",left);
$(".waveform-main b").width(left);
}
});
});
$("")
})
</script>
</body>
</html>