※ STEP 2 で書き換えるコードは、この次に書いてある項目をご覧ください。
ブラウザのブックマークを編集し、中身をURLからプログラム実行コードへと置き換える事で、
「そのブックマークを押すだけ(開こうとするだけ)で、任意のコードを実行する」といった便利な機能がブラウザにはあります。
この機能(＝ブックマークレット)の作成方法自体は「Chrome ブックマークレット」 等で調べてもらえれば分かりますが、
このページ上でも解説します
※ STEP 2 で書き換えるコードは、この次に書いてある項目をご覧ください。
javascript:document.querySelectorAll("video").forEach(_e=>_e.muted=true);
※ ちなみに、後述の DevTools Console 経由版であれば "javascript:" の文字列は不要となります。
逆に言えば、今説明しているブックマークレット版であればこの文字列は必須です
(↓コード再掲)
document.querySelectorAll("video").forEach(_e=>_e.muted=true);
実行すれば、重複して聞こえているように感じていた同時配信者の音声が、平時の状態に戻っている筈です。
用が済んだら、このDevToolsは閉じて構いません。
ただ、配信ページを開きなおしたり、配信参加者が増減するたびに再びダブって聞こえるようになると思います
その場合は、先のコードを再び実行して対応してください
this.handleInitAudioProcess = () => {
this.source = null;
this.audioContext && this.audioContext.close();
// eslint-disable-next-line @typescript-eslint/naming-convention
const AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext) {
this.audioContext = new AudioContext();
this.processor = {
node: this.audioContext.createScriptProcessor(512),
clipping: false,
lastClip: 0,
volume: 0,
clipLevel: 0.98,
averaging: 0.95,
clipLag: 750,
checkClipping: this.handleAudioProcessCheckClipping,
shutdown: this.handleAudioProcessShutdown,
};
this.processor.node.onaudioprocess = this.handleAudioProcess;
this.processor.node.connect(this.audioContext.destination);
// ■自分(あなた自身)が配信者である場合
// ■this.props は MediaStream
if (this.props.performed) {
if (this.props.stream.getAudioTracks().length > 0) {
this.source = this.audioContext.createMediaStreamSource(this.props.stream);
// this.source.connect(this.processor.node);
}
}
// 自分が視聴者の場合
else {
this.source = this.audioContext.createMediaElementSource(this.video);
// this.source.connect(this.processor.node);
}
if (this.source) {
this.source.connect(this.processor.node);
this.gainNode = this.audioContext.createGain();
this.gainNode.gain.value = this.state.muted ? 0 : this.state.volume;
this.video.volume = this.state.muted ? 0 : this.state.volume;
this.source.connect(this.gainNode);
this.gainNode.connect(this.audioContext.destination);
}
else {
this.audioContext = null;
}
}
};
video.onloadedmetadata = function(e) {
video.play();
video.muted = 'true';
};
this.handleInitAudioProcess = () => {
//...中略...
if (AudioContext) {
/*
...
中略
...
*/
if (this.props.performed) {
if (this.props.stream.getAudioTracks().length > 0) {
this.source = this.audioContext.createMediaStreamSource(this.props.stream);
// this.source.connect(this.processor.node);
}
}
else {
this.source = this.audioContext.createMediaElementSource(this.video);
// this.source.connect(this.processor.node);
}
if (this.source) {
this.source.connect(this.processor.node);
this.gainNode = this.audioContext.createGain();
this.gainNode.gain.value = this.state.muted ? 0 : this.state.volume;
this.video.volume = this.state.muted ? 0 : this.state.volume;
this.source.connect(this.gainNode);
this.gainNode.connect(this.audioContext.destination);
//▼+追加ここから
if(r.props.performed){
// 配信者同士の場合のみ、video を明示的に消音(volume 0 だと、多分後で復活させられてしまう気がする)
r.video.muted = true;
}
//▲+追加ここまで
}
else {
this.audioContext = null;
}
}
};
{
// これは完全に除去される
const _at = document.querySelectorAll("video")[1].srcObject.getAudioTracks()[0];
document.querySelectorAll("video")[1].srcObject.removeTrack(_at);
}
{
document.querySelectorAll("video")[1].muted = true;
//または以下でも"止まる"(厳密に言えばミュートとは別ですしおすし)
document.querySelectorAll("video")[1].srcObject.getAudioTracks()[0].stop();
}