Implementierung zum Zeichnen einer Audio-Wellenform mit wavesurfer.js

<Vorlage>
 <div Klasse="waveSurfer">
  <div Klasse="oben">
   <span @click="leftSelect">Weiter auswählen</span>
   <span @click="rightSelect">Rückwärts auswählen</span>
   <span @click="Region">Markieren</span>
  </div>
  <!-- Zeitleiste -->
  <div id="Wellenzeitleiste" />
  <!-- Spektrumdiagramm -->
  <div id="Wellenform">
   <Fortschritt
    id="Fortschritt"
    Klasse = "Fortschritt Fortschritt-gestreift"
    Wert="0"
    max="100"
   ></Fortschritt>
  </div>
  <div v-show="ppt" id="Wellenspektrogramm" Klasse="mt-20" />
  <!-- Bedientasten -->
  <div Klasse="Titel">
   <ul>
    <li>
     <span @click="zoomIn"></span>
    </li>
    <li>
     <span @click="rew"></span>
    </li>
    <li>
     <span :class="{ on: isPlay }" @click="plays"></span>
    </li>
    <li>
     <span @click="speek"></span>
    </li>
    <li>
     <span @click="zoomOut"></span>
    </li>
    <li>
     <span @click="replay"></span>
    </li>
    <li @click="toggleMute" :class="{ ein: Umschalten der Stummschaltfläche }" class="Ton">
     <span></span>
    </li>
    <li>
     <Eingabe
      @mouseup="Volumenleistengriff"
      v-Modell="Volwert"
      Typ="Bereich"
      min="0"
      max="1"
      Wert="0,8"
      Schritt="0,01"
     />
    </li>
    <li @click="Doppelte Geschwindigkeit(index)">
     {{ Geschwindigkeit[index] + " X" }}
    </li>
   </ul>
  </div>
 </div>
</Vorlage>
<Skript>
importiere WaveSurfer aus „wavesurfer.js“;
Importiere die Zeitleiste aus „wavesurfer.js/dist/plugin/wavesurfer.timeline.js“;
Importiere Regionen aus „wavesurfer.js/dist/plugin/wavesurfer.regions.js“;
Standard exportieren {
 Daten: Funktion () {
  zurückkehren {
   Index: 0,
   Geschwindigkeit: [1,0, 1,5, 2,0, 0,5],
   isPlay: falsch,
   ppt: falsch,
   ds: 1,0,
   Zoomwert: 100,
   ZoomMin: 100,
   schnell: 3,
   zurück: 3,
   NotizDaten: [],
   Umschalten der Stummschalttaste: wahr,
   volWert: 0,
   audioUrl: "",
   wird geladen: wahr,
  };
 },
 // berechnet: {
 // // Berechneter Eigenschaftsgetter
 // getUrl: Funktion() {
 // // „this“ bezieht sich auf die VM-Instanz // return this.$store.state.voicetrain.url
 // }
 // },
 // betrachten: {
 // getUrl(neueUrl) {
 // dies.laden = true
 // diese.audioUrl = neueUrl
 // document.getElementById('waveform').innerHTML = ''
 // dies.init()
 // }
 // },
 montiert() {
  diese.audioUrl =
   „http://192.168.1.101:8080/api/files/20201104/62afa213458d44b0a99440b33fb694b9“;
  dies.init();
 },
 
 Methoden: {
  // Initialisierung init() {
   document.getElementById("Fortschritt").style.display = "Block";
   dies.$nextTick(() => {
    dies.wavesurfer = WaveSurfer.create({
     Container: "#Wellenform",
     cursorColor: "#DB7093", // Farbe der Fortschrittslinie der Schallwellenwiedergabe
     Audiorate: 1,
     scrollParent: wahr,
     Backend: "WebAudio",
     Balkenhöhe: 1,5,
     waveColor: "#43d996", // Schallwellenfarbe
     progressColor: "#43d996", // Schallwellenfarbe wurde abgespielt
     loaderColor: "#8B0000",
     hideScrollbar: false,
     autoCenter: wahr,
     Höhe: 120,
     splitChannels: wahr,
     reaktionsfähig: wahr,
     minPxPerSec: 1,
     Plugins: [
      Zeitleiste.erstellen({
       Container: "#wave-timeline",
       Schriftgröße: 14,
       primäreSchriftfarbe: "#9191a5",
       sekundäreSchriftfarbe: "#9191a5",
       Primärfarbe: "#9191a5",
       Sekundärfarbe: "#9191a5",
      }),
      Regionen.erstellen({}),
     ],
    });
    dies.wavesurfer.addRegion({
     Schleife: falsch,
     ziehen: falsch,
     Größe ändern: false,
     Farbe: "rgba(254, 255, 255, 0.4)",
    });
    // Fortschrittsbalken wird geladen this.wavesurfer.on("loading", function (percents) {
     document.getElementById("Fortschritt").Wert = Prozente;
    });
    dies.wavesurfer.load(diese.audioUrl);
    this.value = this.wavesurfer.getVolume() * 100; // Lautstärke abrufen this.zoomValue = this.wavesurfer.params.minPxPerSec;
    dies.zoomMin = dies.wavesurfer.params.minPxPerSec;
    this.wavesurfer.zoom(Zahl(this.zoomWert));
    dies.wavesurfer.panner = dies.wavesurfer.backend.ac.createPanner();
    dies.wavesurfer.backend.setFilter(dieses.wavesurfer.panner);
    lass _this = dies;
    _this.wavesurfer.on("bereit", Funktion () {
     _this.wavesurfer.enableDragSelection({
      Farbe: "rgba(0, 180, 0, 0.3)",
     });
     _this.wavesurfer.clearRegions();
     _this.wavesurfer.zoom(_this.zoomValue);
     // Audio wird geladen. document.getElementById("progress").style.display = "none";
     document.getElementById("Fortschritt").Wert = 0;
     _this.isPlay = true;
     _dieser.wavesurfer.play(0);
    });
    document.getElementById("Wellenform").onclick = Funktion () {
     _this.isPlay = falsch;
     _this.wavesurfer.clearRegions();
    };
    // Beim Aktualisieren der Region. Der Rückruf erhält dieses Region-Objekt.
    // this.wavesurfer.on("region-updated", Funktion (Region) {
    // region.playLoop(); // Die ausgewählte Region in einer Schleife abspielen // _this.isPlay = true;
    // });
    _this.wavesurfer.on("Region erstellt", _this.addRegion);
    _this.wavesurfer.on("Region-Klick", _this.editAnnotation);
 
    _this.wavesurfer.on("fertig", Funktion () {
     _dieser.wavesurfer.play(0);
    });
   });
  },
  addRegion(Parameter) {
   dies.wavesurfer.clearRegions();
   params.handleLeftEl.style.backgroundColor = "transparent";
   params.handleRightEl.style.backgroundColor = "transparent";
  },
  Stummschalten() {
   wenn (dieser.toggleMutebutton) {
    this.volumeCached = this.wavesurfer.getVolume();
    dies.wavesurfer.setVolume(0);
    this.toggleMutebutton = falsch;
    dieser.volValue = 0;
   } anders {
    wenn (this.volumeCached == 0) this.volumeCached = 1;
    dies.wavesurfer.setVolume(dieses.volumeCached);
    dies.toggleMutebutton = true;
    dieser.volValue = dieser.volumeCached;
   }
  },
  volumeBarHandle(e) {
   wenn (e.offsetX >= 0 und e.offsetX <= 80) {
    dies.toggleMutebutton = true;
    dies.wavesurfer.setVolume(e.offsetX / 80);
   } sonst wenn (e.offsetX < 0) {
    this.toggleMutebutton = falsch;
    dies.wavesurfer.setVolume(0);
   } anders {
    dies.wavesurfer.setVolume(1);
    dies.toggleMutebutton = true;
   }
  },
  // Region kommentieren() {
   konsole.log(
    Objekt.getOwnPropertyNames(diese.wavesurfer.regions.list).Länge
   );
   Wenn (
    Object.getOwnPropertyNames(this.wavesurfer.regions.list).length == 0
   ) {
    alert("Bitte wählen Sie Ripple");
    zurückkehren;
   }
   sei start = 0,
    Ende = 0;
   für (var k in this.wavesurfer.regions.list) {
    let obj = this.wavesurfer.regions.list[k];
    start = obj.start.toFixed(2) * 1000;
    Ende = obj.end.toFixed(2) * 1000;
   }
   Konsole.log(dieses.wavesurfer);
   Konsole.log("Start", Start);
   console.log("Ende", Ende);
  },
  // Abspielen plays() {
   dies.istPlay = !dies.istPlay;
   this.wavesurfer.playPause(); //Zur Wiedergabe wechseln, Wiedergabe oder Pause anwenden},
  // Zurücksetzen rew() {
   dies.wavesurfer.skip(-dieses.zurück);
   dies.goPlay();
  },
  // Schneller Vorlauf speak() {
   dies.wavesurfer.skip(dies.fast);
   dies.goPlay();
  },
  // Neu laden replay() {
   dies.isPlay = true;
   dies.wavesurfer.stop();
   dies.wavesurfer.clearRegions();
   dies.wavesurfer.play(0);
  },
  // Doppelte Geschwindigkeit(Index) {
   wenn (Index === 3) {
    dieser.index = 0;
    dies.wavesurfer.setPlaybackRate(diese.Geschwindigkeit[dieser.Index]);
   } anders {
    dieser.index = index + 1;
    dies.wavesurfer.setPlaybackRate(diese.Geschwindigkeit[dieser.Index]);
   }
   Konsole.log(dieses.wavesurfer);
  },
  // Anzeigeformat für den Zoom in Prozent formatZoom(val) {
   return val + 100 + " Pixel/Sekunde";
  },
  // Klicken zum Verkleinern zoomIn() {
   wenn (dieser.zoomValue >= 100) {
    zurückkehren;
   }
   dieser.zoomWert += 1;
   dies.wavesurfer.zoom(dieser.zoomValue);
  },
  // Zum Vergrößern klicken zoomOut() {
   wenn (dieser.zoomWert < -100) {
    zurückkehren;
   }
   dieser.zoomWert -= 1;
   dies.wavesurfer.zoom(dieser.zoomValue);
  },
  // Zoom-Listener zoomChange() {
   this.wavesurfer.zoom(Zahl(this.zoomWert));
  },
  geheSpielen() {
   lass start = this.wavesurfer.getCurrentTime();
   dies.wavesurfer.play(start);
  },
  // Vorwärts auswählen leftSelect() {
   let end = this.wavesurfer.getCurrentTime(); // Aktuelle Wiedergabeposition abrufen this.waveRegion(this.wavesurfer, 0, end, "rgba(0,180,0,.3)", true);
  },
  // Auswählen rightSelect() {
   let start = this.wavesurfer.getCurrentTime(); // Aktuelle Wiedergabeposition abrufen let end = this.wavesurfer.getDuration(); // Dauer des Audioclips abrufen this.waveRegion(this.wavesurfer, start, end, "rgba(0,180,0,.3)", true);
  },
  waveRegion(Wellensurfer, Start, Ende, Farbe, klar) {
   wenn (!löschen) {
    wavesurfer.clearRegions();
   }
   wavesurfer.addRegion({
    Anfang: Anfang,
    Ende: Ende,
    Farbe: Farbe,
    ziehen: falsch,
   });
  },
  // Erstelle ein neues saveRegions() für das Region-Klick-Ereignis {
   console.log("Stimmenabdruck-Klick---");
   diese.noteData = [];
   const _this = dies;
   this.noteData = Objekt.keys(_this.wavesurfer.regions.list).map(Funktion (
    Ausweis
   ) {
    const region = _this.wavesurfer.regions.list[id];
    zurückkehren {
     Ich würde: Ich würde,
     bearbeiten: falsch,
     Start: Math.round(region.start * 10) / 10,
     Ende: Math.round(region.end * 10) / 10,
     Attribute: region.attributes,
     Daten: { Hinweis: region.data.note || "" },
    };
   });
  },
  // Bereich klicken editAnnotation() {
   dies.isPlay = falsch;
  },
  showNote(region) {
   wenn (!this.showNote.el) {
    this.showNote.el = document.querySelector("#Untertitel");
   }
   this.showNote.el.textContent = region.data.note || "–";
  },
  // Lautstärke einstellen setVolume(val) {
   konsole.log(Wert);
   dies.wavesurfer.setVolume(val / 100);
  },
  //Instanz klicken clearReagion() {
   dies.wavesurfer.clearRegions();
  },
 },
};
</Skript>
<style lang="scss" scoped>
#Wellenform {
 Position: relativ;
}
.Spitze {
 Breite: 100 %;
 Flex-Basis: 70px;
 Zeilenhöhe: 40px;
 Flex-Schrumpfen: 0;
 Farbe: weiß;
 Texteinzug: 15px;
 Spanne,
 el-Schieberegler {
  Farbe: rgb(39, 39, 39);
  Schriftgröße: 13px;
  Schriftstärke: 700;
  Rand rechts: 20px;
  Polsterung: 4px 10px;
  Rand: 1px durchgezogen #ccc;
  Rahmenradius: 10px;
 }
}
.Titel {
 Breite: 100 %;
 Flex-Basis: 70px;
 Zeilenhöhe: 40px;
 Textausrichtung: links;
 Flex-Schrumpfen: 0;
 Farbe: weiß;
 Texteinzug: 15px;
 ul {
  Listenstiltyp: keiner;
  Auffüllen-Inline-Start: 0;
  .Geschwindigkeit {
   Anzeige: Flex;
   Flex-Richtung: Spalte;
  }
  li {
   Position: relativ;
   Anzeige: Inline-Block;
   Cursor: Standard;
   &:schweben {
   }
   &:aktiv {
   }
   Spanne {
    Anzeige: Inline-Block;
    Breite: 30px;
    Höhe: 30px;
    Zeilenhöhe: 30px;
   }
   &:n-tes-Kind(1) span {
    Breite: 27px;
    Höhe: 27px;
    Hintergrund: url("img/shrink.png") rechts;
    Hintergrundgröße: Abdeckung;
   }
   &:n-tes-Kind(2) span {
    Hintergrund: url("img/kuaitui_bg.png") rechts;
    Hintergrundgröße: Abdeckung;
   }
   &:n-tes-Kind(3) {
    Spanne {
     Hintergrund: url("img/bofang_bg.png") rechts;
     Hintergrundgröße: Abdeckung;
    }
    .An {
     Hintergrund: url("img/zanting_bg.png") rechts;
     Hintergrundgröße: Abdeckung;
    }
   }
   &:n-tes-Kind(4) span {
    Hintergrund: URL("img/kuaijin_bg.png") rechts;
    Hintergrundgröße: Abdeckung;
   }
   &:n-tes-Kind(5) span {
    Hintergrund: url("img/zoom.png") rechts;
    Hintergrundgröße: Abdeckung;
   }
   &:n-tes-Kind(6) span {
    Hintergrund: URL("img/zhongbo.png") rechts;
    Hintergrundgröße: Abdeckung;
   }
   &:n-tes-Kind(9) {
    Farbe: rgb(39, 39, 39);
    Schriftgröße: 13px;
    Schriftstärke: 700;
   }
   &:n-tes-Kind(7) {
    Hintergrund: keiner;
    Spanne {
     Breite: 25px;
     Höhe: 25px;
     Hintergrund: URL("img/silent.png") keine Wiederholung;
     Hintergrundgröße: Abdeckung;
    }
    &.An {
     Spanne {
      Breite: 25px;
      Höhe: 25px;
      Hintergrund: URL("img/speaker.png") keine Wiederholung;
      Hintergrundgröße: Abdeckung;
     }
    }
   }
   &:n-tes-Kind(8) {
    Breite: 80px;
    Hintergrund: keiner;
    Eingabe {
     -webkit-auftritt: keines;
     -moz-Aussehen: keines;
     -ms-Erscheinungsbild: keines;
     Breite: 80px;
     Höhe: 3px;
     Hintergrundfarbe: #bbbbbb;
     Position: absolut;
     links: 0;
     oben: -14px;
 
     &::-webkit-slider-thumb {
      -webkit-auftritt: keines;
     }
     &::-moz-range-trackpseduo {
      -moz-Aussehen: keines;
     }
     &::-ms-track {
      Breite: 100 %;
      Cursor: Zeiger;
      Hintergrund: transparent; /* Blendet den Schieberegler aus, damit benutzerdefinierte Stile hinzugefügt werden können */
      Rahmenfarbe: transparent;
      Farbe: transparent;
     }
     &:Fokus {
      Gliederung: keine;
     }
     &::-webkit-slider-thumb {
      -webkit-auftritt: keines;
      Höhe: 9px;
      Breite: 9px;
      Rand oben: -1px;
      Hintergrund: #bbb;
      Randradius: 50 %;
      Rand: durchgezogen 0,125em rgba (205, 224, 230, 0,5);
     }
     &::-moz-Bereich-Daumen {
      -moz-Aussehen: keines;
      Höhe: 6px;
      Breite: 6px;
      Rand oben: -1px;
      Hintergrund: #bbb;
      Randradius: 50 %;
      Rand: durchgezogen 0,125em rgba (205, 224, 230, 0,5);
     }
     &::-ms-track {
      -moz-Aussehen: keines;
      Höhe: 6px;
      Breite: 6px;
      Rand oben: -1px;
      Hintergrund: #bbb;
      Randradius: 50 %;
      Rand: durchgezogen 0,125em rgba (205, 224, 230, 0,5);
     }
    }
   }
  }
 }
}
#Wellenzeitleiste {
 Höhe: 21px;
}
#Wellenform {
 Breite: 100 %;
 Flex-Basis: 128px;
 Flex-Schrumpfen: 0;
 Position: relativ;
}
#Fortschritt {
 Position: absolut;
 Breite: 100 %;
 Höhe: 4px;
 Hintergrund: #ccc;
 oben: 48 %;
 Deckkraft: 0,7;
 Z-Index: 44;
}
.mt-20 {
 Rand oben: 20px;
}
.mt-30 {
 Rand oben: 30px;
}
.waveSurfer {
 Breite: 470px;
}
.waveSurfer >>> .el-slider__runway {
 Rand: 6px 0;
}
</Stil>