如何在html5中绘制音频流的波形?

ssk

我有一个来自网络摄像头的媒体流。我需要动态绘制音频的波形(从媒体流中提取)。如何在HTML5中使用JS做到这一点?

我检查了:

https://github.com/soundcloud/waveformjs

https://github.com/katspaugh/wavesurfer.js

它们似乎都可以处理音频文件。如何进行流式处理?

ssk

我使用waveurfer(https://github.com/katspaugh/wavesurfer.js)来完成此任务。

我的代码:

if (this.remoteStream_ != null) {
    if (this.wavesurfer_ == null) {
        var parent = this;
        this.wavesurfer_ = Object.create(WaveSurfer);
        this.wavesurfer_.init({
            container: '#waveform',
            waveColor: '#fff'
        });
        this.wavesurferStream_ = Object.create(WaveSurfer.Streamer);
        this.wavesurferStream_.init({
            wavesurfer: this.wavesurfer_
        });
        // start the microphone
        this.wavesurferStream_.start(this.remoteStream_);
        this.audioWaveIconSet_.on();
    } else {
        if (this.wavesurferStream_ != null) {
            this.wavesurferStream_.destroy();
            this.wavesurferStream_ = null;
        }
        this.wavesurfer_.destroy();
        this.wavesurfer_ = null;
        this.audioWaveIconSet_.off();
    }
}

Wavesurfer插件流:

/*! wavesurfer.js 1.0.57 (Thu, 25 Feb 2016 17:09:20 GMT)
 * https://github.com/katspaugh/wavesurfer.js
 * @license CC-BY-3.0 */
! function(a, b) {
    "function" == typeof define && define.amd ? define(["wavesurfer"], function(a) {
        return b(a)
    }) : "object" == typeof exports ? module.exports = b(require("wavesurfer.js")) : b(WaveSurfer)
}(this, function(a) {
    "use strict";
    a.Streamer = {
        init: function(a) {
            this.params = a;
            this.wavesurfer = a.wavesurfer;
            if (!this.wavesurfer) throw new Error("No WaveSurfer instance provided");
            this.active = !1, this.paused = !1, this.reloadBufferFunction = this.reloadBuffer.bind(this);
            this.bufferSize = this.params.bufferSize || 4096, this.numberOfInputChannels = this.params.numberOfInputChannels || 1, this.numberOfOutputChannels = this.params.numberOfOutputChannels || 1, this.micContext = this.wavesurfer.backend.getAudioContext();
        },
        start: function(stream) {
            this.gotStream(stream);
        },
        togglePlay: function() {
            this.active ? (this.paused = !this.paused, this.paused ? this.pause() : this.play()) : this.start()
        },
        play: function() {
            this.paused = !1, this.connect()
        },
        pause: function() {
            this.paused = !0, this.disconnect()
        },
        stop: function() {
            this.active && (this.stopDevice(), this.wavesurfer.empty())
        },
        stopDevice: function() {},
        connect: function() {
            void 0 !== this.stream && (this.mediaStreamSource = this.micContext.createMediaStreamSource(this.stream), this.levelChecker = this.micContext.createScriptProcessor(this.bufferSize, this.numberOfInputChannels, this.numberOfOutputChannels), this.mediaStreamSource.connect(this.levelChecker), this.levelChecker.connect(this.micContext.destination), this.levelChecker.onaudioprocess = this.reloadBufferFunction)
        },
        disconnect: function() {
            void 0 !== this.mediaStreamSource && this.mediaStreamSource.disconnect(), void 0 !== this.levelChecker && (this.levelChecker.disconnect(), this.levelChecker.onaudioprocess = void 0)
        },
        reloadBuffer: function(a) {
            this.paused || (this.wavesurfer.empty(), this.wavesurfer.loadDecodedBuffer(a.inputBuffer))
        },
        gotStream: function(a) {
            this.stream = a, this.active = !0, this.play()
        },
        destroy: function(a) {
            this.paused = !0, this.stop()
        },
        deviceError: function(a) {},
        extractVersion: function(a, b, c) {
            var d = a.match(b);
            return d && d.length >= c && parseInt(d[c], 10)
        },
        detectBrowser: function() {
            var a = {};
            return a.browser = null, a.version = null, a.minVersion = null, "undefined" != typeof window && window.navigator ? navigator.mozGetUserMedia ? (a.browser = "firefox", a.version = this.extractVersion(navigator.userAgent, /Firefox\/([0-9]+)\./, 1), a.minVersion = 31, a) : navigator.webkitGetUserMedia && window.webkitRTCPeerConnection ? (a.browser = "chrome", a.version = this.extractVersion(navigator.userAgent, /Chrom(e|ium)\/([0-9]+)\./, 2), a.minVersion = 38, a) : navigator.mediaDevices && navigator.userAgent.match(/Edge\/(\d+).(\d+)$/) ? (a.browser = "edge", a.version = this.extractVersion(navigator.userAgent, /Edge\/(\d+).(\d+)$/, 2), a.minVersion = 10547, a) : (a.browser = "Not a supported browser.", a) : (a.browser = "Not a supported browser.", a)
        }
    }, a.util.extend(a.Streamer, a.Observer)
}), ! function(a, b) {
    "function" == typeof define && define.amd ? define(["wavesurfer"], function(a) {
        return b(a)
    }) : "object" == typeof exports ? module.exports = b(require("wavesurfer.js")) : b(WaveSurfer)
}(this, function(a) {
    "use strict";
    a.Streamer = {
        init: function(a) {
            if (this.params = a, this.wavesurfer = a.wavesurfer, !this.wavesurfer) throw new Error("No WaveSurfer instance provided");
            this.active = !1, this.paused = !1, this.reloadBufferFunction = this.reloadBuffer.bind(this);
            this.bufferSize = this.params.bufferSize || 4096, this.numberOfInputChannels = this.params.numberOfInputChannels || 1, this.numberOfOutputChannels = this.params.numberOfOutputChannels || 1, this.micContext = this.wavesurfer.backend.getAudioContext();
        },
        start: function(stream) {
            this.gotStream(stream);
        },
        togglePlay: function() {
            this.active ? (this.paused = !this.paused, this.paused ? this.pause() : this.play()) : this.start()
        },
        play: function() {
            this.paused = !1, this.connect()
        },
        pause: function() {
            this.paused = !0, this.disconnect()
        },
        stop: function() {
            this.active && (this.stopDevice(), this.wavesurfer.empty())
        },
        stopDevice: function() {},
        connect: function() {
            void 0 !== this.stream && (this.mediaStreamSource = this.micContext.createMediaStreamSource(this.stream), this.levelChecker = this.micContext.createScriptProcessor(this.bufferSize, this.numberOfInputChannels, this.numberOfOutputChannels), this.mediaStreamSource.connect(this.levelChecker), this.levelChecker.connect(this.micContext.destination), this.levelChecker.onaudioprocess = this.reloadBufferFunction)
        },
        disconnect: function() {
            void 0 !== this.mediaStreamSource && this.mediaStreamSource.disconnect(), void 0 !== this.levelChecker && (this.levelChecker.disconnect(), this.levelChecker.onaudioprocess = void 0)
        },
        reloadBuffer: function(a) {
            this.paused || (this.wavesurfer.empty(), this.wavesurfer.loadDecodedBuffer(a.inputBuffer))
        },
        gotStream: function(a) {
            this.stream = a, this.active = !0, this.play()
        },
        destroy: function(a) {
            this.paused = !0, this.stop()
        },
        deviceError: function(a) {},
        extractVersion: function(a, b, c) {
            var d = a.match(b);
            return d && d.length >= c && parseInt(d[c], 10)
        },
        detectBrowser: function() {
            var a = {};
            return a.browser = null, a.version = null, a.minVersion = null, "undefined" != typeof window && window.navigator ? navigator.mozGetUserMedia ? (a.browser = "firefox", a.version = this.extractVersion(navigator.userAgent, /Firefox\/([0-9]+)\./, 1), a.minVersion = 31, a) : navigator.webkitGetUserMedia && window.webkitRTCPeerConnection ? (a.browser = "chrome", a.version = this.extractVersion(navigator.userAgent, /Chrom(e|ium)\/([0-9]+)\./, 2), a.minVersion = 38, a) : navigator.mediaDevices && navigator.userAgent.match(/Edge\/(\d+).(\d+)$/) ? (a.browser = "edge", a.version = this.extractVersion(navigator.userAgent, /Edge\/(\d+).(\d+)$/, 2), a.minVersion = 10547, a) : (a.browser = "Not a supported browser.", a) : (a.browser = "Not a supported browser.", a)
        }
    }, a.util.extend(a.Streamer, a.Observer)
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在 PyQtGraph 中绘制音频波形

来自分类Dev

如何在Android上绘制音频波形

来自分类Dev

播放实时音频流-html5

来自分类Dev

如何在html5音频和视频播放器中回显php数组?

来自分类Dev

如何停止和恢复HTML5中的实时音频流而不仅仅是暂停它?

来自分类Dev

从音频绘制波形的算法

来自分类Dev

如何在html5 canvas中绘制Fabric js strokeRect?

来自分类Dev

如何在多个画布HTML5上绘制圆?

来自分类Dev

使用html5播放音频流

来自分类Dev

检测HTML5音频流何时中断或暂停

来自分类Dev

如何使用JavaScript在HTML5 Canvas中绘制圆?

来自分类Dev

播放html5中的音频范围

来自分类Dev

HTML5中的音频:如何在另一个声音之后播放声音?

来自分类Dev

如何在HTML5中不使用对等连接的情况下实现多方音频会议系统?

来自分类Dev

如何将音频波形绘制到位图

来自分类Dev

从Android中的解码声音文件绘制音频波形

来自分类Dev

从Android中的解码声音文件绘制音频波形

来自分类Dev

切换SHOUTcast音频流HTML5音频播放器和JQuery

来自分类Dev

切换SHOUTcast音频流HTML5音频播放器和JQuery

来自分类Dev

在HTML5中绘制折线

来自分类Dev

IE 10+中的HTML5音频元素为ShoutCAST mp3流抛出“无效源”

来自分类Dev

如何在旧版的Internet Explorer中支持HTML5音频标签?

来自分类Dev

如何在角度过滤器中将HTML5音频/视频作为输出返回

来自分类Dev

如何摆脱Safari中html5音频标签中的“已加载”文本

来自分类Dev

如何在HTML5 / HTML中创建形状?

来自分类Dev

HTML5视频-SQL文件流中的流

来自分类Dev

如何强制HTML5音频标签重新加载(更改中的)文件

来自分类Dev

如何禁用音频播放器HTML5中的特定控件

来自分类Dev

如何将文件加载到html5音频标签中

Related 相关文章

  1. 1

    如何在 PyQtGraph 中绘制音频波形

  2. 2

    如何在Android上绘制音频波形

  3. 3

    播放实时音频流-html5

  4. 4

    如何在html5音频和视频播放器中回显php数组?

  5. 5

    如何停止和恢复HTML5中的实时音频流而不仅仅是暂停它?

  6. 6

    从音频绘制波形的算法

  7. 7

    如何在html5 canvas中绘制Fabric js strokeRect?

  8. 8

    如何在多个画布HTML5上绘制圆?

  9. 9

    使用html5播放音频流

  10. 10

    检测HTML5音频流何时中断或暂停

  11. 11

    如何使用JavaScript在HTML5 Canvas中绘制圆?

  12. 12

    播放html5中的音频范围

  13. 13

    HTML5中的音频:如何在另一个声音之后播放声音?

  14. 14

    如何在HTML5中不使用对等连接的情况下实现多方音频会议系统?

  15. 15

    如何将音频波形绘制到位图

  16. 16

    从Android中的解码声音文件绘制音频波形

  17. 17

    从Android中的解码声音文件绘制音频波形

  18. 18

    切换SHOUTcast音频流HTML5音频播放器和JQuery

  19. 19

    切换SHOUTcast音频流HTML5音频播放器和JQuery

  20. 20

    在HTML5中绘制折线

  21. 21

    IE 10+中的HTML5音频元素为ShoutCAST mp3流抛出“无效源”

  22. 22

    如何在旧版的Internet Explorer中支持HTML5音频标签?

  23. 23

    如何在角度过滤器中将HTML5音频/视频作为输出返回

  24. 24

    如何摆脱Safari中html5音频标签中的“已加载”文本

  25. 25

    如何在HTML5 / HTML中创建形状?

  26. 26

    HTML5视频-SQL文件流中的流

  27. 27

    如何强制HTML5音频标签重新加载(更改中的)文件

  28. 28

    如何禁用音频播放器HTML5中的特定控件

  29. 29

    如何将文件加载到html5音频标签中

热门标签

归档