From 64bf184abdb32aebc300a43103181ddc1da11138 Mon Sep 17 00:00:00 2001 From: wancheng1990 <25022549@qq.com> Date: Thu, 4 Mar 2021 11:05:29 +0800 Subject: [PATCH] add volume controller --- .vuepress/components/DemoPlayer.vue | 20 +++++-- .vuepress/components/renderer.js | 52 +++++-------------- .vuepress/dist/404.html | 6 +-- .vuepress/dist/index.html | 4 +- .vuepress/dist/player.html | 4 +- .vuepress/dist/thirdparty/libde265/index.html | 4 +- public/renderer.js | 52 +++++-------------- 7 files changed, 54 insertions(+), 88 deletions(-) diff --git a/.vuepress/components/DemoPlayer.vue b/.vuepress/components/DemoPlayer.vue index a27e444a..80f065b2 100644 --- a/.vuepress/components/DemoPlayer.vue +++ b/.vuepress/components/DemoPlayer.vue @@ -9,10 +9,20 @@ -
+
- + +
@@ -54,7 +64,8 @@ showBandwidth: false, err: "", speed: 0, - performance: '' + performance: '', + volume: 1 }; }, computed: { @@ -214,6 +225,9 @@ this.err = ""; this.performance = ''; }, + volumeChange() { + this.jessibuca.setVolume(this.volume); + }, destroy() { if (this.jessibuca) { diff --git a/.vuepress/components/renderer.js b/.vuepress/components/renderer.js index 07d2544a..1e91df09 100644 --- a/.vuepress/components/renderer.js +++ b/.vuepress/components/renderer.js @@ -56,6 +56,7 @@ if (!opt.forceNoGL) this._initContextGL(); this._audioContext = new (window.AudioContext || window.webkitAudioContext)(); + this._gainNode = this._audioContext.createGain(); this._audioEnabled(true); if (!opt.isNotMute) { this._audioEnabled(false); @@ -101,7 +102,6 @@ this._initStatus(); this._initEventListener(); this._hideBtns(); - this._initGainNode(); // this._initWakeLock(); this._enableWakeLock(); @@ -389,37 +389,6 @@ } }; - - Jessibuca.prototype._initGainNode = function () { - var gainNode = this._audioContext.createGain(); - var _this = this; - var source; - if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) { - console.log('getUserMedia not supported on your browser!'); - return; - } - - navigator.mediaDevices.getUserMedia( - // constraints - only audio needed for this app - { - audio: true - }, - - // Success callback - function (stream) { - source = _this._audioContext.createMediaStreamSource(stream); - source.connect(gainNode); - gainNode.connect(_this._audioContext.destination); - _this._gainNode = gainNode; - }, - - // Error callback - function (err) { - console.log('The following gUM error occurred: ' + err); - } - ); - }; - Jessibuca.prototype._showControl = function () { var result = false; @@ -778,9 +747,10 @@ _this._audioPlaying = true; copyToCtxBuffer(fromBuffer); var source = context.createBufferSource(); + source.buffer = audioBuffer; - source.connect(context.destination); - // source.onended = playNextBuffer; + source.connect(_this._gainNode); + _this._gainNode.connect(context.destination); source.start(); }; _this._playAudio = playAudio @@ -888,8 +858,8 @@ _this._audioPlaying = true; var audioBufferSouceNode = context.createBufferSource(); audioBufferSouceNode.buffer = buffer; - audioBufferSouceNode.connect(context.destination); - // audioBufferSouceNode.onended = playNextBuffer; + audioBufferSouceNode.connect(_this._gainNode); + _this._gainNode.connect(context.destination); audioBufferSouceNode.start(); if (!_this._audioInterval) { _this._audioInterval = setInterval(playNextBuffer, buffer.duration * 1000 - 1); @@ -975,14 +945,15 @@ copyToCtxBuffer(fromBuffer); var source = context.createBufferSource(); source.buffer = audioBuffer; - source.connect(context.destination); + source.connect(_this._gainNode); + _this._gainNode.connect(context.destination); if (!_this._audioInterval) { _this._audioInterval = setInterval(playNextBuffer, audioBuffer.duration * 1000); } source.start(); }; this._playAudio = playAudio; - } + }; /** * Returns true if the canvas supports WebGL */ @@ -1578,6 +1549,11 @@ */ Jessibuca.prototype.setVolume = function (volume) { if (this._gainNode) { + volume = parseFloat(volume); + if (isNaN(volume)) { + return; + } + this._isDebug() && console.log('set volume:', volume); this._gainNode.gain.setValueAtTime(volume, this._audioContext.currentTime); } }; diff --git a/.vuepress/dist/404.html b/.vuepress/dist/404.html index ee815577..9150e1b1 100644 --- a/.vuepress/dist/404.html +++ b/.vuepress/dist/404.html @@ -8,13 +8,13 @@ - + -

404

There's nothing here.
+ - + diff --git a/.vuepress/dist/index.html b/.vuepress/dist/index.html index 4271eaf4..da5ab629 100644 --- a/.vuepress/dist/index.html +++ b/.vuepress/dist/index.html @@ -8,7 +8,7 @@ - + @@ -49,6 +49,6 @@ ffmpeg（h264-aac）

# 基本原理
GPL Licensed | Copyright © 2020-present dexter
- + diff --git a/.vuepress/dist/player.html b/.vuepress/dist/player.html index ff961c2e..b126d09f 100644 --- a/.vuepress/dist/player.html +++ b/.vuepress/dist/player.html @@ -8,7 +8,7 @@ - + @@ -17,6 +17,6 @@ (opens new window)
输入URL：
缓冲(秒): wasm 自适应
  • 支持3种格式：
  1. ws-raw 即ws://localhost/live/test (该协议只能对接monibuca服务器 (opens new window))
  2. ws-flv 即ws://localhost/live/test.flv
  3. http-flv 即http://localhost/live/test.flv
  • 注意http协议会有跨域问题，需要设置cors头
  • 协议同时支持https、wss
  • demo播放器只提供AAC的解码演示
- + diff --git a/.vuepress/dist/thirdparty/libde265/index.html b/.vuepress/dist/thirdparty/libde265/index.html index 41e140b7..5cd48518 100644 --- a/.vuepress/dist/thirdparty/libde265/index.html +++ b/.vuepress/dist/thirdparty/libde265/index.html @@ -8,7 +8,7 @@ - + @@ -50,6 +50,6 @@ using cmake on other platforms.

farin@struktur.de

- + diff --git a/public/renderer.js b/public/renderer.js index 07d2544a..1e91df09 100644 --- a/public/renderer.js +++ b/public/renderer.js @@ -56,6 +56,7 @@ if (!opt.forceNoGL) this._initContextGL(); this._audioContext = new (window.AudioContext || window.webkitAudioContext)(); + this._gainNode = this._audioContext.createGain(); this._audioEnabled(true); if (!opt.isNotMute) { this._audioEnabled(false); @@ -101,7 +102,6 @@ this._initStatus(); this._initEventListener(); this._hideBtns(); - this._initGainNode(); // this._initWakeLock(); this._enableWakeLock(); @@ -389,37 +389,6 @@ } }; - - Jessibuca.prototype._initGainNode = function () { - var gainNode = this._audioContext.createGain(); - var _this = this; - var source; - if (!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)) { - console.log('getUserMedia not supported on your browser!'); - return; - } - - navigator.mediaDevices.getUserMedia( - // constraints - only audio needed for this app - { - audio: true - }, - - // Success callback - function (stream) { - source = _this._audioContext.createMediaStreamSource(stream); - source.connect(gainNode); - gainNode.connect(_this._audioContext.destination); - _this._gainNode = gainNode; - }, - - // Error callback - function (err) { - console.log('The following gUM error occurred: ' + err); - } - ); - }; - Jessibuca.prototype._showControl = function () { var result = false; @@ -778,9 +747,10 @@ _this._audioPlaying = true; copyToCtxBuffer(fromBuffer); var source = context.createBufferSource(); + source.buffer = audioBuffer; - source.connect(context.destination); - // source.onended = playNextBuffer; + source.connect(_this._gainNode); + _this._gainNode.connect(context.destination); source.start(); }; _this._playAudio = playAudio @@ -888,8 +858,8 @@ _this._audioPlaying = true; var audioBufferSouceNode = context.createBufferSource(); audioBufferSouceNode.buffer = buffer; - audioBufferSouceNode.connect(context.destination); - // audioBufferSouceNode.onended = playNextBuffer; + audioBufferSouceNode.connect(_this._gainNode); + _this._gainNode.connect(context.destination); audioBufferSouceNode.start(); if (!_this._audioInterval) { _this._audioInterval = setInterval(playNextBuffer, buffer.duration * 1000 - 1); @@ -975,14 +945,15 @@ copyToCtxBuffer(fromBuffer); var source = context.createBufferSource(); source.buffer = audioBuffer; - source.connect(context.destination); + source.connect(_this._gainNode); + _this._gainNode.connect(context.destination); if (!_this._audioInterval) { _this._audioInterval = setInterval(playNextBuffer, audioBuffer.duration * 1000); } source.start(); }; this._playAudio = playAudio; - } + }; /** * Returns true if the canvas supports WebGL */ @@ -1578,6 +1549,11 @@ */ Jessibuca.prototype.setVolume = function (volume) { if (this._gainNode) { + volume = parseFloat(volume); + if (isNaN(volume)) { + return; + } + this._isDebug() && console.log('set volume:', volume); this._gainNode.gain.setValueAtTime(volume, this._audioContext.currentTime); } };