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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MYSQL開発パフォーマンス調査:バッチデータ挿入の最適化方法
>>: Windows での MySQL 5.7.18 インストール チュートリアル
方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...
この記事では、フロントエンドのカウントダウン効果を実現するためのJavaScriptの具体的なコード...
Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な展開、コンテナ ...
この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...
ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...
では、GIF、PNG、JPG のどの形式を候補形式として選択すればよいのでしょうか。また、どの画像形...
1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...
問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...
MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...
1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...
目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...
目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...
目次1. コンポーネントの構成2. コンポーネント名2.1 コンポーネントの命名3. グローバル登録...
CSS における位置指定の概要position属性は英語で位置を意味し、 CSSでの主な機能は要素...
IE で ClearType をオンにした後に発生する透明フォントの問題を解決するには、透明要素に背...