wavesurfer.js によるオーディオ波形描画の実装

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る

進むを選択:

後方を選択:

コードは次のとおりです(例):

<テンプレート>
 <div class="waveSurfer">
  <div class="top">
   <span @click="leftSelect">次へ進む</span>
   <span @click="rightSelect">後方を選択</span>
   <span @click="Region">マーク</span>
  </div>
  <!-- タイムライン -->
  <div id="wave-timeline" />
  <!-- スペクトルグラフ -->
  <div id="波形">
   <進捗
    id="進捗状況"
    クラス="progress progress-striped"
    値="0"
    最大 = "100"
   </進捗状況>
  </div>
  <div v-show="ppt" id="波スペクトログラム" class="mt-20" />
  <!-- コントロール ボタン -->
  <div class="title">
   <ul>
    <li>
     <span @click="ズームイン"></span>
    </li>
    <li>
     <span @click="戻る"></span>
    </li>
    <li>
     <span :class="{ on: isPlay }" @click="再生"></span>
    </li>
    <li>
     <span @click="speek"></span>
    </li>
    <li>
     <span @click="ズームアウト"></span>
    </li>
    <li>
     <span @click="再生"></span>
    </li>
    <li @click="toggleMute" :class="{ on: ミュートボタンを切り替え }" class="sound">
     <span></span>
    </li>
    <li>
     <入力
      @mouseup="ボリュームバーハンドル"
      v-model="volValue"
      タイプ="範囲"
      最小値 = "0"
      最大 = "1"
      値="0.8"
      ステップ="0.01"
     />
    </li>
    <li @click="DoubleSpeed(インデックス)">
     {{ speed[index] + " X" }}
    </li>
   </ul>
  </div>
 </div>
</テンプレート>
<スクリプト>
「wavesurfer.js」からWaveSurferをインポートします。
「wavesurfer.js/dist/plugin/wavesurfer.timeline.js」からタイムラインをインポートします。
「wavesurfer.js/dist/plugin/wavesurfer.regions.js」からリージョンをインポートします。
エクスポートデフォルト{
 データ: 関数 () {
  戻る {
   インデックス: 0,
   速度: [1.0, 1.5, 2.0, 0.5],
   isPlay: false、
   ppt: 偽、
   ds: 1.0,
   ズーム値: 100,
   ズーム最小: 100,
   速い: 3,
   背面: 3,
   注記データ: [],
   ミュートボタンの切り替え: true、
   ボリューム値: 0,
   オーディオURL: "",
   読み込み中: true、
  };
 },
 // 計算: {
 // // 計算プロパティゲッター
 // getUrl: 関数() {
 // // `this` は VM インスタンスを参照します // this.$store.state.voicetrain.url を返します
 // }
 // },
 // 時計: {
 // getUrl(新しいUrl) {
 // this.loading = true
 // this.audioUrl = newUrl
 // document.getElementById('waveform').innerHTML = ''
 // this.init()
 // }
 // },
 マウント() {
  this.audioUrl =
   "http://192.168.1.101:8080/api/files/20201104/62afa213458d44b0a99440b33fb694b9";
  これを初期化します。
 },
 
 メソッド: {
  // 初期化 init() {
   document.getElementById("progress").style.display = "ブロック";
   this.$nextTick(() => {
    this.wavesurfer = WaveSurfer.create({
     コンテナ: "#waveform",
     cursorColor: "#DB7093", // サウンド ウェーブ再生の進行状況ラインの色
     オーディオレート: 1,
     スクロール親: true、
     バックエンド: "WebAudio",
     バーの高さ: 1.5,
     waveColor: "#43d996", // 音波の色
     progressColor: "#43d996", // サウンド ウェーブ カラーが再生されました
     ローダーカラー: "#8B0000",
     スクロールバーを非表示: false、
     自動センター: true、
     高さ: 120,
     分割チャネル: true、
     応答性: true、
     最小ピクセル/秒: 1,
     プラグイン: [
      タイムライン.create({
       コンテナ: "#wave-timeline",
       フォントサイズ: 14,
       プライマリフォントカラー: "#9191a5",
       セカンダリフォントカラー: "#9191a5",
       プライマリカラー: "#9191a5",
       セカンダリカラー: "#9191a5",
      })、
      リージョンを作成します({})
     ]、
    });
    this.wavesurfer.addRegion({
     ループ: false、
     ドラッグ: false、
     サイズ変更: false、
     色: "rgba(254, 255, 255, 0.4)"、
    });
    // 読み込み進捗バー this.wavesurfer.on("loading", function (percents) {
     document.getElementById("progress").value = パーセント;
    });
    this.wavesurfer.load(this.audioUrl);
    this.value = this.wavesurfer.getVolume() * 100; // 音量を取得 this.zoomValue = this.wavesurfer.params.minPxPerSec;
    this.zoomMin = this.wavesurfer.params.minPxPerSec;
    this.wavesurfer.zoom(数値(this.zoomValue));
    this.wavesurfer.panner は this.wavesurfer.backend.ac.createPanner() です。
    this.wavesurfer.backend.setFilter(this.wavesurfer.panner);
    _this = this とします。
    _this.wavesurfer.on("準備完了", 関数() {
     _this.wavesurfer.enableDragSelection({
      色: "rgba(0, 180, 0, 0.3)"、
     });
     _this.wavesurfer.clearRegions();
     _this.wavesurfer.zoom(_this.zoomValue);
     // オーディオの読み込みが完了しました document.getElementById("progress").style.display = "none";
     document.getElementById("進行状況").value = 0;
     _this.isPlay = true;
     _this.wavesurfer.play(0);
    });
    document.getElementById("波形").onclick = 関数 () {
     _this.isPlay = false;
     _this.wavesurfer.clearRegions();
    };
    // 領域を更新するとき。コールバックはこの Region オブジェクトを受け取ります。
    // this.wavesurfer.on("region-updated", function (region) {
    // region.playLoop(); // 選択した領域をループ再生します // _this.isPlay = true;
    // });
    _this.wavesurfer.on("領域が作成されました", _this.addRegion);
    _this.wavesurfer.on("領域クリック", _this.editAnnotation);
 
    _this.wavesurfer.on("終了", 関数() {
     _this.wavesurfer.play(0);
    });
   });
  },
  領域を追加します(パラメータ) {
   this.wavesurfer.clearRegions();
   params.handleLeftEl.style.backgroundColor = "透明";
   params.handleRightEl.style.backgroundColor = "透明";
  },
  ミュートを切り替える(){
   if (this.toggleMutebutton) {
    this.volumeCached = this.wavesurfer.getVolume();
    ボリュームを0に設定します。
    this.toggleMuteボタン = false;
    this.volValue = 0;
   } それ以外 {
    this.volumeCached が 0 の場合、 this.volumeCached は 1 になります。
    this.wavesurfer.setVolume(this.volumeCached);
    this.toggleMuteボタン = true;
    this.volValue = this.volumeCached;
   }
  },
  ボリュームバーハンドル(e) {
   (e.offsetX >= 0 && e.offsetX <= 80) の場合 {
    this.toggleMuteボタン = true;
    this.wavesurfer.setVolume(e.offsetX / 80);
   } そうでない場合 (e.offsetX < 0) {
    this.toggleMuteボタン = false;
    ボリュームを0に設定します。
   } それ以外 {
    ボリュームを設定します。
    this.toggleMuteボタン = true;
   }
  },
  // 領域に注釈を付ける() {
   コンソール.log(
    オブジェクト.getOwnPropertyNames(this.wavesurfer.regions.list).length
   );
   もし (
    Object.getOwnPropertyNames(this.wavesurfer.regions.list).length == 0
   ){
    alert("リップルを選択してください");
    戻る;
   }
   開始 = 0 とします。
    終了 = 0;
   (this.wavesurfer.regions.list内の変数k) {
    obj = this.wavesurfer.regions.list[k]とします。
    開始 = obj.start.toFixed(2) * 1000;
    終了 = obj.end.toFixed(2) * 1000;
   }
   コンソールにログ出力します。
   console.log("開始"、開始);
   console.log("終了", 終了);
  },
  // 再生 plays() {
   this.isPlay = !this.isPlay;
   this.wavesurfer.playPause(); //再生に切り替える、再生または一時停止を適用する},
  // ロールバック rew() {
   this.wavesurfer.skip(-this.back);
   this.goPlay();
  },
  // 早送り speek() {
   this.wavesurfer.skip(this.fast);
   this.goPlay();
  },
  // リロード replay() {
   this.isPlay = true;
   このウェーブサーファーを停止します。
   this.wavesurfer.clearRegions();
   再生回数: 0
  },
  // DoubleSpeed(インデックス) {
   (インデックス === 3)の場合{
    this.index = 0;
    this.wavesurfer.setPlaybackRate(this.speed[this.index]);
   } それ以外 {
    this.index = インデックス + 1;
    this.wavesurfer.setPlaybackRate(this.speed[this.index]);
   }
   コンソールにログ出力します。
  },
  // ズーム率の表示形式 formatZoom(val) {
   val + 100 + "ピクセル/秒"を返します。
  },
  // クリックしてズームアウトします zoomIn() {
   (this.zoomValue >= 100)の場合{
    戻る;
   }
   this.zoomValue += 1;
   this.wavesurfer.zoom(this.zoomValue);
  },
  // クリックして拡大 zoomOut() {
   (this.zoomValue < -100)の場合{
    戻る;
   }
   this.zoomValue -= 1;
   this.wavesurfer.zoom(this.zoomValue);
  },
  // ズームリスナー zoomChange() {
   this.wavesurfer.zoom(数値(this.zoomValue));
  },
  プレイ() {
   start = this.wavesurfer.getCurrentTime(); とします。
   this.wavesurfer.play(開始);
  },
  // 前方を選択 leftSelect() {
   let end = this.wavesurfer.getCurrentTime(); // 現在の再生位置を取得します this.waveRegion(this.wavesurfer, 0, end, "rgba(0,180,0,.3)", true);
  },
  // 選択 rightSelect() {
   let start = this.wavesurfer.getCurrentTime(); // 現在の再生位置を取得します。let end = this.wavesurfer.getDuration(); // オーディオ クリップの継続時間を取得します。this.waveRegion(this.wavesurfer, start, end, "rgba(0,180,0,.3)", true);
  },
  ウェーブリージョン(ウェーブサーファー、開始、終了、色、クリア) {
   クリアの場合
    wavesurfer.clearRegions();
   }
   ウェーブサーファー.addRegion({
    開始: 開始、
    終了: 終了、
    色: 色、
    ドラッグ: false、
   });
  },
  // リージョンクリックイベント用の新しい saveRegions() を作成します {
   console.log("音声クリック---");
   this.noteData = [];
   _this は定数です。
   this.noteData = Object.keys(_this.wavesurfer.regions.list).map(関数(
    id
   ){
    _this.wavesurfer.regions.list[id] を定数で指定します。
    戻る {
     id: id、
     編集: 誤り、
     開始: Math.round(region.start * 10) / 10,
     終了: Math.round(region.end * 10) / 10,
     属性: 地域.属性、
     データ: { 注記: region.data.note || "" },
    };
   });
  },
  // エリアクリック editAnnotation() {
   this.isPlay = false;
  },
  表示ノート(地域) {
   if (!this.showNote.el) {
    this.showNote.el = document.querySelector("#subtitle");
   }
   this.showNote.el.textContent = region.data.note || "–";
  },
  // 音量を設定する setVolume(val) {
   コンソールログ(val);
   this.wavesurfer.setVolume(val / 100);
  },
  //インスタンスクリックclearRegion() {
   this.wavesurfer.clearRegions();
  },
 },
};
</スクリプト>
<style lang="scss" スコープ>
#波形{
 位置: 相対的;
}
.トップ{
 幅: 100%;
 フレックスベース: 70px;
 行の高さ: 40px;
 フレックス収縮: 0;
 色: 白;
 テキストインデント: 15px;
 スパン、
 el-スライダー{
  色: rgb(39, 39, 39);
  フォントサイズ: 13px;
  フォントの太さ: 700;
  右マージン: 20px;
  パディング: 4px 10px;
  境界線: 1px 実線 #ccc;
  境界線の半径: 10px;
 }
}
。タイトル {
 幅: 100%;
 フレックスベース: 70px;
 行の高さ: 40px;
 テキスト配置: 左;
 フレックス収縮: 0;
 色: 白;
 テキストインデント: 15px;
 ul {
  リストスタイルタイプ: なし;
  パディングインライン開始: 0;
  。スピード {
   ディスプレイ: フレックス;
   flex-direction: 列;
  }
  li {
   位置: 相対的;
   表示: インラインブロック;
   カーソル: デフォルト;
   &:ホバー{
   }
   &:アクティブ {
   }
   スパン {
    表示: インラインブロック;
    幅: 30ピクセル;
    高さ: 30px;
    行の高さ: 30px;
   }
   &:n番目の子(1) スパン {
    幅: 27px;
    高さ: 27px;
    背景: url("img/shrink.png") 右;
    背景サイズ: カバー;
   }
   &:n番目の子(2) span {
    背景: url("img/kuaitui_bg.png") 右;
    背景サイズ: カバー;
   }
   &:n番目の子(3) {
    スパン {
     背景: url("img/bofang_bg.png") 右;
     背景サイズ: カバー;
    }
    。の上 {
     背景: url("img/zanting_bg.png") 右;
     背景サイズ: カバー;
    }
   }
   &:n番目の子(4) span {
    背景: url("img/kuaijin_bg.png") 右;
    背景サイズ: カバー;
   }
   &:n番目の子(5) span {
    背景: url("img/zoom.png") 右;
    背景サイズ: カバー;
   }
   &:n番目の子(6) span {
    背景: url("img/zhongbo.png") 右;
    背景サイズ: カバー;
   }
   &:n番目の子(9) {
    色: rgb(39, 39, 39);
    フォントサイズ: 13px;
    フォントの太さ: 700;
   }
   &:n番目の子(7) {
    背景: なし;
    スパン {
     幅: 25px;
     高さ: 25px;
     背景: url("img/silent.png") 繰り返しなし;
     背景サイズ: カバー;
    }
    &。の上 {
     スパン {
      幅: 25px;
      高さ: 25px;
      背景: url("img/speaker.png") 繰り返しなし;
      背景サイズ: カバー;
     }
    }
   }
   &:n番目の子(8) {
    幅: 80ピクセル;
    背景: なし;
    入力{
     -webkit-appearance: なし;
     -moz-appearance: なし;
     -ms-外観: なし;
     幅: 80ピクセル;
     高さ: 3px;
     背景色: #bbbbbb;
     位置: 絶対;
     左: 0;
     上: -14px;
 
     &::-webkit-スライダー-サムネイル {
      -webkit-appearance: なし;
     }
     &::-moz-range-trackpseduo {
      -moz-appearance: なし;
     }
     &::-ms-トラック{
      幅: 100%;
      カーソル: ポインタ;
      background: transparent; /* スライダーを非表示にしてカスタムスタイルを追加できるようにします */
      境界線の色: 透明;
      色: 透明;
     }
     &:集中 {
      アウトライン: なし;
     }
     &::-webkit-スライダー-サムネイル {
      -webkit-appearance: なし;
      高さ: 9px;
      幅: 9px;
      上マージン: -1px;
      背景: #bbb;
      境界線の半径: 50%;
      境界線: 実線 0.125em rgba(205, 224, 230, 0.5);
     }
     &::-moz-range-thumb {
      -moz-appearance: なし;
      高さ: 6px;
      幅: 6px;
      上マージン: -1px;
      背景: #bbb;
      境界線の半径: 50%;
      境界線: 実線 0.125em rgba(205, 224, 230, 0.5);
     }
     &::-ms-トラック{
      -moz-appearance: なし;
      高さ: 6px;
      幅: 6px;
      上マージン: -1px;
      背景: #bbb;
      境界線の半径: 50%;
      境界線: 実線 0.125em rgba(205, 224, 230, 0.5);
     }
    }
   }
  }
 }
}
#ウェーブタイムライン{
 高さ: 21px;
}
#波形{
 幅: 100%;
 フレックスベース: 128px;
 フレックス収縮: 0;
 位置: 相対的;
}
#進捗 {
 位置: 絶対;
 幅: 100%;
 高さ: 4px;
 背景: #ccc;
 トップ: 48%
 不透明度: 0.7;
 zインデックス: 44;
}
.mt-20 {
 上マージン: 20px;
}
.mt-30 {
 上マージン: 30px;
}
.waveSurfer {
 幅: 470ピクセル;
}
.waveSurfer >>> .el-slider__runway {
 マージン: 6px 0;
}
</スタイル>

リンク: https://wavesurfer-js.org

これで、オーディオ波形を描画するための wavesurfer.js の実装に関するこの記事は終了です。wavesurfer.js オーディオ波形に関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • RIFFおよびWAVEオーディオファイル形式の詳細な説明

<<:  MYSQL開発パフォーマンス調査:バッチデータ挿入の最適化方法

>>:  Windows での MySQL 5.7.18 インストール チュートリアル

推薦する

Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャ...

JavaScript の document.activeELement フォーカス要素の紹介

目次1. デフォルトの焦点はボディにあります2. テキストボックスのフォーカスを手動で取得する3. ...

React プロジェクトにおける axios カプセル化と API インターフェース管理の詳細な説明

目次序文インストール導入環境の切り替え傍受を要求するレスポンスインターセプションAPIの統合管理要約...

シンプルなカルーセル効果を実現するJavaScript

カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...

Linux bzip2 コマンドの使用

1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...

MySQL COUNT関数の使用と最適化

目次COUNT 関数は何をするのですか? MyISAMの「魔法」シンプルなCOUNT最適化近似値を使...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows)

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカ...

Linux で at および cron スケジュールタスクをカスタマイズする方法

Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...

WAMPにインストールするとMySQLが起動できるが、再起動後に起動できなくなる問題の解決方法

初めてwampをインストールした後、すべてのサービスが正常に使用できますが、再起動するとwampのア...

mysql-8.0.16 winx64 最新インストール チュートリアル (画像とテキスト付き)

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明

1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...

Dockerイメージをプライベートリポジトリにアップロードする方法の例

イメージは、GitHub と同様に Docker パブリック リポジトリに直接簡単にプッシュできます...

オンラインMySQLオプティマイザの誤判断によって発生した低速クエリイベントを記録する

序文:非常に遅いクエリとリクエストのタイムアウトのアラートを受け取りました。メトリックを通じて My...

TypeScript 学習ノート: 型の絞り込み

目次序文型推論真理値の絞り込み平等の縮小演算子の絞り込みインスタンスの絞り込み狭まりの本質ユニオン型...