Browse Source

add volume controller

worker
wancheng1990 4 years ago
parent
commit
64bf184abd
  1. 20
      .vuepress/components/DemoPlayer.vue
  2. 52
      .vuepress/components/renderer.js
  3. 6
      .vuepress/dist/404.html
  4. 4
      .vuepress/dist/index.html
  5. 4
      .vuepress/dist/player.html
  6. 4
      .vuepress/dist/thirdparty/libde265/index.html
  7. 52
      public/renderer.js

20
.vuepress/components/DemoPlayer.vue

@ -9,10 +9,20 @@
<button v-if="!playing" @click="play">播放</button>
<button v-else @click="pause">停止</button>
</div>
<div class="input" v-if="loaded">
<div class="input" v-if="loaded" style="line-height: 30px">
<button @click="destroy">销毁</button>
<button v-if="isMute" @click="cancelMute">取消静音</button>
<button v-else @click="mute">静音</button>
<template v-else>
<button @click="mute">静音</button>
音量
<select v-model="volume" @change="volumeChange">
<option value="1">100</option>
<option value="0.75">75</option>
<option value="0.5">50</option>
<option value="0.25">25</option>
</select>
</template>
<button @click="fullscreen">全屏</button>
<button @click="screenShot">截图</button>
<div style="line-height: 30px">
@ -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) {

52
.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);
}
};

6
.vuepress/dist/404.html

@ -8,13 +8,13 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.aa31f368.js" as="script"><link rel="preload" href="/assets/js/8.b1971db2.js" as="script"><link rel="prefetch" href="/assets/js/10.80fc41e8.js"><link rel="prefetch" href="/assets/js/11.d0cda4e1.js"><link rel="prefetch" href="/assets/js/12.d1684e5b.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/3.da803b5d.js"><link rel="prefetch" href="/assets/js/4.68a0df26.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/9.ed642192.js">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/8.b1971db2.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/3.da803b5d.js"><link rel="prefetch" href="/assets/js/4.a1cfdbbd.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/" class="router-link-active">
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>That's a Four-Oh-Four.</blockquote> <a href="/" class="router-link-active">
Take me home.
</a></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.aa31f368.js" defer></script><script src="/assets/js/8.b1971db2.js" defer></script>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/8.b1971db2.js" defer></script>
</body>
</html>

4
.vuepress/dist/index.html

@ -8,7 +8,7 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.aa31f368.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/9.ed642192.js" as="script"><link rel="prefetch" href="/assets/js/10.80fc41e8.js"><link rel="prefetch" href="/assets/js/11.d0cda4e1.js"><link rel="prefetch" href="/assets/js/12.d1684e5b.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/4.68a0df26.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/9.a9dfd281.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/4.a1cfdbbd.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
</head>
<body>
@ -49,6 +49,6 @@ ffmpeg(h264-aac)</p> <div class="language-bash extra-class"><pre class="lang
</code></pre></div><h2 id="基本原理"><a href="#基本原理" class="header-anchor">#</a> 基本原理</h2> <img src="/tech.png"></div> <div class="footer">
GPL Licensed | Copyright © 2020-present dexter
</div></main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.aa31f368.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/9.ed642192.js" defer></script>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/9.a9dfd281.js" defer></script>
</body>
</html>

4
.vuepress/dist/player.html

@ -8,7 +8,7 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.aa31f368.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/11.d0cda4e1.js" as="script"><link rel="preload" href="/assets/js/4.68a0df26.js" as="script"><link rel="prefetch" href="/assets/js/10.80fc41e8.js"><link rel="prefetch" href="/assets/js/12.d1684e5b.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.ed642192.js">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/11.5b4fb341.js" as="script"><link rel="preload" href="/assets/js/4.a1cfdbbd.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/12.2293222f.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
</head>
<body>
@ -17,6 +17,6 @@
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/langhuihui/jessibuca" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span></span> <!----></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><div class="root"><div class="container-shell"><div id="container" class="container"></div> <div class="input"><div>输入URL:</div> <input autocomplete="on" value> <button>播放</button></div> <!----> <div class="option"><span>缓冲(秒):</span> <input type="number" value="0.2" style="width:50px"> <input type="checkbox"><span>wasm</span> <select><option selected="selected">h264</option> <option>h265</option></select> <input type="checkbox"><span>自适应</span></div></div></div> <ul><li>支持3种格式:</li></ul> <ol><li>ws-raw 即ws://localhost/live/test (该协议只能对接<a href="https://monibuca.com" target="_blank" rel="noopener noreferrer">monibuca服务器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</li> <li>ws-flv 即ws://localhost/live/test.flv</li> <li>http-flv 即http://localhost/live/test.flv</li></ol> <ul><li>注意http协议会有跨域问题,需要设置cors头</li> <li>协议同时支持https、wss</li> <li>demo播放器只提供AAC的解码演示</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.aa31f368.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/11.d0cda4e1.js" defer></script><script src="/assets/js/4.68a0df26.js" defer></script>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/11.5b4fb341.js" defer></script><script src="/assets/js/4.a1cfdbbd.js" defer></script>
</body>
</html>

4
.vuepress/dist/thirdparty/libde265/index.html

@ -8,7 +8,7 @@
<meta name="description" content="一款纯H5直播流播放器">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.aa31f368.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/12.d1684e5b.js" as="script"><link rel="prefetch" href="/assets/js/10.80fc41e8.js"><link rel="prefetch" href="/assets/js/11.d0cda4e1.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/4.68a0df26.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.ed642192.js">
<link rel="preload" href="/assets/css/0.styles.95cb2992.css" as="style"><link rel="preload" href="/assets/js/app.c608341c.js" as="script"><link rel="preload" href="/assets/js/3.da803b5d.js" as="script"><link rel="preload" href="/assets/js/12.2293222f.js" as="script"><link rel="prefetch" href="/assets/js/10.9b4ed4f7.js"><link rel="prefetch" href="/assets/js/11.5b4fb341.js"><link rel="prefetch" href="/assets/js/2.e03afa67.js"><link rel="prefetch" href="/assets/js/4.a1cfdbbd.js"><link rel="prefetch" href="/assets/js/5.d46c2315.js"><link rel="prefetch" href="/assets/js/6.cdb8fb55.js"><link rel="prefetch" href="/assets/js/7.c1c034cd.js"><link rel="prefetch" href="/assets/js/8.b1971db2.js"><link rel="prefetch" href="/assets/js/9.a9dfd281.js">
<link rel="stylesheet" href="/assets/css/0.styles.95cb2992.css">
</head>
<body>
@ -50,6 +50,6 @@ using cmake on other platforms.</p> <h1 id="prebuilt-binaries"><a href="#prebuil
General Public License. The sample applications are distributed under
the terms of the GNU General Public License.</p> <p>See <code>COPYING</code> for more details.</p> <p>Copyright (c) 2013-2014 Struktur AG
Contact: Dirk Farin <a href="mailto:farin@struktur.de">farin@struktur.de</a></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.aa31f368.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/12.d1684e5b.js" defer></script>
<script src="/assets/js/app.c608341c.js" defer></script><script src="/assets/js/3.da803b5d.js" defer></script><script src="/assets/js/12.2293222f.js" defer></script>
</body>
</html>

52
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);
}
};

Loading…
Cancel
Save