video.js plugin that adds a navigable waveform for audio and video files
Home Page: https://collab-project.github.io/videojs-wavesurfer
License: MIT License
A video.js plugin that adds a navigable waveform for audio and video files, using the wavesurfer.js library. Includes support for fullscreen mode and real-time visualization of microphone input.
The documentation and examples can be found on: https://collab-project.github.io/videojs-wavesurfer
This work is licensed under the MIT License.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Wavesurfer.js v2 has been merged to master (see #29 and katspaugh/wavesurfer.js#1092) and requires some changes, let's make this plugin compatible with it.
Checkout the https://github.com/collab-project/videojs-wavesurfer/tree/adv-plugin-29 branch and install the dependencies using npm, e.g.:
cd videojs-wavesurfer
git checkout adv-plugin-29
npm install
Start the local webserver for the examples:
npm run start
And open http://localhost:9999/examples/index.html in a browser.
If you pause and then play an audio track in Safari, the waveform canvas will not update (making it look like nothing is happening).
For example, if you play this example and pause it, then try to play it again, the waveform will not update: https://collab-project.github.io/videojs-wavesurfer/examples/texttrack.html
I think this is a problem with this plugin because all of the wavesurfer.js examples do not have this issue in safari. (see katspaugh/wavesurfer.js#1215) I've tried to investigate why this is happening, but I can't track it down. Any ideas?
Can you add event waveFinish. Because i want to catch that event for my player
Can't play video without wavesurfer set up in plugins.
In the video example, change var player to:
var player = videojs('myVideo', {
controls: true,
autoplay: false,
fluid: false,
loop: false,
width: 600,
height: 300,
sources: [{ src: 'media/example.mp4' }](Remove plugins, add sources, change autoplay)
Video to play normally without wavesurfer plugins set up. (I want to have multiple videos on a page, some with wavesurfer, some without)
Unresponsive controls on video(s) without wavesurfer set up.
Firefox: _this.activePlayer.activeWavesurferPlugin is undefined
Chrome:
Uncaught TypeError: Cannot read property 'on' of undefined
at new WavesurferTech (videojs.wavesurfer.js:88)
at e.loadTech_ (video.min.js:6)
at e.src_ (video.min.js:6)
at video.min.js:6
at $t (video.min.js:1)
at $t (video.min.js:1)
at e.<anonymous> (video.min.js:1)
at r (video.min.js:2)
The problem seems to be with overriding the Html5 tech. Changing line 1082 in videojs.wavesurfer.js from
_video2.default.registerTech('Html5', _tech2.default);
to
_video2.default.registerTech('Wavesurfer', _tech2.default);
appears to fix this functionality, although videojs.wavesurfer.css is still in effect, which causes the time remaining and fullscreen icon to overlap.
Using video.js 6.5.1 and wavesurfer.js 2.0.0-beta02 with videojs-wavesurfer 2.0.3 in Firefox Developer Edition 58 and Google Chrome 62 on Windows 10
With the Media Session API, you can now customize media notifications by providing metadata for the media your web app is playing. It also allows you to handle media related events such as seeking or track changing which may come from notifications or media keys.
I basically want to be able to control a videojs-wavesurfer instance from the notification area of my android phone.
See https://developers.google.com/web/updates/2017/02/media-session
Hi, @thijstriemstra
I am trying to add zoom feature of wavesurfer.js in your plugin.
How can I call wavesurfer.js zoom method from your script?
Thanks in advance for your help #
I already installed the plugins videojs-wavesurfer (npm install videojs-wavesurfer --save) and wavesurfer.js (npm install wavesurfer.js --save) and now I want to use them in my Ionic 3 component.
I was working only with Video.js, and all it working fine. But now, I need to add videojs-wavesurfer plugin.
I tried:
Component.html:
<audio class="video-js vjs-default-skin" controls #audio>
<source [src]="audioSource" type="audio/mp3">
</audio>Component.ts:
import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
import VideojsWavesurfer from 'videojs-wavesurfer';
let audioJS = videojs(this.audio,
{
fluid: true,
plugins: {
wavesurfer: {
src: this.audioSource,
msDisplayMax: 10,
debug: true,
waveColor: 'grey',
progressColor: 'black',
cursorColor: 'black',
hideScrollbar: true
}
}
}, () => {
});But console prints the following error:
ERROR Error: plugin "wavesurfer" does not exist
So, I changed the code to:
import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
import VideojsWavesurfer from 'videojs-wavesurfer';
let audioJS = videojs(this.audio,
{
fluid: true,
plugins: {
VideojsWavesurfer
}
}, () => {
});And apparently recognized the plugin, but now I get this error:
Uncaught Error: Cannot find module "WaveSurfer"
How can I fix it?
Node module name for Waveform.js is incorrect. Line 13 of videojs.wavesurfer.js should be
module.exports = factory(require('video.js'), require('wavesurfer.js'));
Try to import plugin into my JS
That the JS compiles correctly
Get an error on compilation that the wavesurfer module can't be found
Cannot find module 'wavesurfer' from 'PATH/node_modules/videojs-wavesurfer'
ie11 doesn't support wav, use mp3 in the example instead. Note that IE11 doesn't support webaudio at all, the waveform isn't drawn but playback works.
Also include them in the release zipfile.
6.0 was released recently.
Hi there,
It is not really an issue, but I could find another way to talk with you.
Does videojs-wavesurfer works with HLS live Stream?
Sorry to attack you like that, here where I work we have couple HLS videos on a monitoring page that I need to display its audio without unmute the videos.
thanks in advance,
Anderson Santos
The cursor plugin for example: https://wavesurfer-js.org/plugins/cursor.html
Using ES6 and installed through NPM, just ran into this error. Videojs-wavesurfer is looking to resolve a 'videojs' but the official module is video.js. I'll try to fix it with webpack config but should probably be fixed?
Videojs has an option for playback speed, like playbackRates = [0.5, 0.75, 1]. This adds a control to select the rate. Could this be integrated to change wavesurfer playback rate? (Also, videojs.wavesurfer.css causes this control to overlap the fullscreen button.)
video.js >= 6.7 throws the following infinite loop:
Error: Script terminated by timeout at: evented@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:2982:
Player@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:21187:5
videojs@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:25338:12
WavesurferTech@http://127.0.0.1:9999/dist/videojs.wavesurfer.js:80:30
loadTech_@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:21763:18
MediaLoader@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:11643:11
addChild@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:3642:19
handleAdd@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:3764:24
initChildren@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:3781:7
Player@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:21212:5
videojs@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:25338:12
WavesurferTech@http://127.0.0.1:9999/dist/videojs.wavesurfer.js:80:30
loadTech_@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:21763:18
MediaLoader@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:11643:11
addChild@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:3642:19
handleAdd@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:3764:24
initChildren@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:3781:7
Player@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:21212:5
videojs@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:25338:12
WavesurferTech@http://127.0.0.1:9999/dist/videojs.wavesurfer.js:80:30
Here's a diff of video.js between 6.6.3 (that works) and 6.7.2 (broken): videojs/video.js@v6.6.3...v6.7.2
High CPU-Usage.
Activate and use the plugin.
I except, that after create the visualisation, the cpu-usage is reduced
While play, about 100% (on one core), about 50-60% withouth wavesurfer.
Please include any additional information necessary here. Including the following:
6.7.3
i personal use firefox...
... with kali and kubuntu
Play button doesn't work
Use the current build of video.js, and wavesurfer 1.1.11. Autoload will play, play controls do not work.
Play/pause should work. Calls to player.waveform.play() are ignored.
Play/pause does not work. If you use exactly the same version of video.js and wavesurfer, (5.10.8 and 1.1.0) as in the demo, then the control work as described.
No errors.
Please include any additional information necessary here. Including the following:
wavesurfer 1.1.11, whatever the current videoJS is.
Chrome
Windows, Android
im trying to play AVI file in wavesurfer.js it says cant read encoded data when i provide the input file as AVI but, with wav it works fine. so i decided to use videojs.wavesurfer im struck im not seeing any error message in console and im unable to see anything on my screen with below code can anyone please help me to read avi file in wavesurfer. or please let ne know if we can read avi in videojswavesurfer .
import WaveSurfer from '../../../../node_modules/wavesurfer.js'
import TimelinePlug from '../../../../node_modules/wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js';
import videojs from '../../../../node_modules/videojs-wavesurfer/src/js/videojs.wavesurfer.js'
var player;
var options = {
controls: true,
autoplay: true,
fluid: false,
loop: false,
width: 600,
height: 300,
plugins: {
wavesurfer: {
src: 'media/example.mp4',
msDisplayMax: 10,
debug: true,
waveColor: '#336699',
progressColor: 'black',
cursorColor: 'black',
hideScrollbar: true
}
}
};
function createPlayer(event) {
player = videojs('myVideo', options, function() {
// print version information at startup
var msg = 'Using video.js '+ videojs.VERSION +
' with videojs-wavesurfer ' +
videojs.getPluginVersion('wavesurfer') +
' and wavesurfer.js ' + WaveSurfer.VERSION;
videojs.log(msg);
});
player.on('waveReady', function(event) {
console.log('waveform: ready!');
});
player.on('playbackFinish', function(event) {
console.log('playback finished.');
});
// error handling
player.on('error', function(error) {
console.warn('ERROR:', error);
});
}';here is my html
<div id="myVideo" class="video-js vjs-default-skin"></div>`Using videojs-wavesurfer with React
Im trying use videojs-wavesurfer and faced some issues. i installed the necessary packages npm install videojs-wavesurfer
and add the some script tags
<script src="lib/videojs.wavesurfer.js"></script>
to my index.html and imported
import videojs from "video.js";
import wavesurfer from "wavesurfer.js"; to my react component.
The component does not render but gives an error
TypeError: The element or ID supplied is not valid. (videojs)
in line 21961 | throw new TypeError('The element or ID supplied is not valid. (videojs)');
Please include any additional information necessary here. Including the following:
latest
chrome 58
ubuntu 14.04
The WavesurferTech breaks video.js when there are multiple players present on a page. I suggest we remove it and add an option that programatically enables them (so it also works in safari).
It's already possible to query the tracks at startup of the plugin:
var tracks = player.textTracks();
console.log('tracks', tracks);
0: e {tech_: e, cues_: Array(2), activeCues_: Array(0), src: "media/hal.vtt", ..Related issue in project that uses this plugin as dependency: collab-project/videojs-record#235
Here's an example of how to break it using 2 instances: clicking the progress bar doesn't work on the 2nd video.js player with a random mp4 file:
diff --git a/examples/index.html b/examples/index.html
index fc08e44..89d2ea4 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -24,6 +24,8 @@
<audio id="myAudio" class="video-js vjs-default-skin"></audio>
+<video id="myVideo" class="video-js vjs-default-skin"></video>
+
<script>
var player = videojs('myAudio', {
controls: true,
@@ -53,6 +55,16 @@ var player = videojs('myAudio', {
player.on('error', function(error) {
console.warn('ERROR:', error);
});
+
+var player2 = videojs("myVideo", {
+ controls: true,
+ autoplay: false
+}, function() {
+ console.log('second player ready');
+});
+// load example MP4 at startup
+player2.src('big_buck_bunny.mp4');
+
</script>
</body>In the video example I would expect to see the video playing along with the waveform, instead I only see the waveform
Hi! yep, a terrifically useful plugin - thanks!!
I've been stumbling around looking for a way to have it work with the latest version of wavesurfer and the just released version 5 master branch of videojs.
If anyone could point out how to get running with the new video.js (version 50 which has lots of responsive features now I believe.
player will always start, because option "autostart" is ignored.
in function onWaveReady() change
// auto-play when ready
this.play();to
// auto-play when ready
if (this.player().options().autoplay)
{
this.play();
}Getting this error with main example using video.js 6.2.8.
Error's related to this video.js code:
CurrentTimeDisplay.prototype.updateTextNode_ = function updateTextNode_() {
if (this.textNode_) {
// XXX: this line below
this.contentEl_.removeChild(this.textNode_);
}
this.textNode_ = document_1.createTextNode(' ' + (this.formattedTime_ || '0:00'));
this.contentEl_.appendChild(this.textNode_);
};Previously, on device ready the waveform (from wavesurfer plugin) would appear on device ready. The waveform is appearing if I enter full screen mode and then continues to appear after going back to regular mode. The original issue may have stopped on the update from wavesurfer 2.1.1 to 2.6.1. (moved to 2.6.3 to see if the issue persisted)
I also updated to videojs-record 3.1.0 (from 2.4.1) to see if that resolved the issue. It did not.
Here is my player configuration:
` this.player = videojs(
'myVideo',
{
controls: true,
controlBar: {
durationDisplay: false,
timeDivider: false
},
width: 320,
height: 240,
fluid: false,
plugins: {
// wavesurfer section is only needed when recording audio-only
wavesurfer: {
src: 'live',
waveColor: '#36393b',
progressColor: 'black',
debug: true,
audioRate: 1,
cursorWidth: 1,
msDisplayMax: 20,
hideScrollbar: true
},
record: {
audio: true,
video: false,
maxLength: 3600,
debug: true
}
}
},
() => {
// print version information at startup
var version_info =
'Using video.js ' +
videojs.VERSION +
' with videojs-record ' +
videojs.getPluginVersion('record') +
', videojs-wavesurfer ' +
videojs.getPluginVersion('wavesurfer') +
', wavesurfer ' +
videojs.getPluginVersion('wavesurfer') +
' and recordrtc ' +
RecordRTC.version;
videojs.log(version_info);
}
);`
This has not changed substantially since it worked. It is embedded in a react component. (Sorry about the formatting.)
On device ready to see waveform initiate and persist as recording starts.
no issues except as described.
Make sure to include the following versions:
VIDEOJS: Using video.js 7.3.0 with videojs-record 3.1.0, videojs-wavesurfer 2.6.3, wavesurfer 2.6.3 and recordrtc 5.4.9
chrome 70 and Firefox (v? but recent)
Thanks and let me know if there is any more information I can provide.
Joe
Hi,
I'm trying to use load() function to load track with already generated peaks as second param.
Instead of using variable with peaks, it calls AJAX with url of content of the variable.
Same issue with using param peaks.
Works when called like this player.wavesurfer().surfer.load() but on play peaks being replaced.
Hello, excellent plugin.
I would like to have an idea, on how to display the audio track for the part of the video that has been loaded into the player, because in your case you hide the video image, right? Is this possible?
Thank you,
Best regards,
Daniel
Hello , I get the error below when trying to use this plugin, I have tried many different versions of videojs but still error persists ..
VIDEOJS: ERROR: TypeError: d.default is undefined
Stack trace:
value@http://videotoolbox.app/assets/plugins/videojs/videojs.wavesurfer.min.js:8:3934
r@http://videotoolbox.app/assets/plugins/videojs/video.min.js:2:376
r@http://videotoolbox.app/assets/plugins/videojs/video.min.js:1:7943
U/r.dispatcher@http://videotoolbox.app/assets/plugins/videojs/video.min.js:1:6918
X@http://videotoolbox.app/assets/plugins/videojs/video.min.js:1:7589
trigger@http://videotoolbox.app/assets/plugins/videojs/video.min.js:2:2969
bn</t.prototype.triggerReady/<@http://videotoolbox.app/assets/plugins/videojs/video.min.js:2:7481
r@http://videotoolbox.app/assets/plugins/videojs/video.min.js:2:376
Hi !
It's not really an issue but i have to design a HTML5 player and i have to retrieve the audio track from my video playing in an HTMLVideoElement.
How can you reach this audio informations ??? I ask because I imagine you did the same in order to display this wave.
Thanks a lot and great job
When you enable the splitChannels option for wavesurfer.js,
var player = videojs('myAudio',
{
controls: true,
autoplay: true,
loop: false,
width: 600,
height: 300,
plugins: {
wavesurfer: {
src: 'media/hal.wav',
msDisplayMax: 10,
debug: true,
waveColor: 'grey',
progressColor: 'black',
cursorColor: 'black',
splitChannels: true,
hideScrollbar: true
}
}
});it currently renders something like:
Which is not good, the full drawing should stay within the video.js player's dimensions.
This is a great plugin, thanks for your hard work! I wondered if there's a way to reset the source? I would like to switch between different audio files. Thanks!
E.g.
controlBar: {
volumePanel: false,
fullscreenToggle: false,
durationDisplay: false,
timeDivider: false,
currentTimeDisplay: false
},Results in:
TypeError: this.player.controlBar.currentTimeDisplay is undefined
videojs.wavesurfer.js:505:8 setCurrentTime
videojs.wavesurfer.js:505:8 onWaveReady
When using videojs-record with this plugin (==2.1.1) it goes into an infinite loop;
logByType@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:489:5\n
log@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:505:3\n
log@http://127.0.0.1:9999/node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js:329:13\n
log@http://127.0.0.1:9999/node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js:1154:14\n
play@http://127.0.0.1:9999/node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js:723:17\n
play@http://127.0.0.1:9999/node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js:121:20\n
techGet_@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:21904:14\n
play@http://127.0.0.1:9999/dist/videojs.record.js:1454:18\n
play@http://127.0.0.1:9999/node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js:726:17\n
play@http://127.0.0.1:9999/node_modules/videojs-wavesurfer/dist/videojs.wavesurfer.js:121:20\n
techGet_@http://127.0.0.1:9999/node_modules/video.js/dist/video.js:21904:14\n
play@http://127.0.0.1:9999/dist/videojs.record.js:1454:18\n
play@http://127.0.0.1:9999/node_m…
Not registering the tech recently introduced fixes the problem.
Hi everyone,
I am struggling to figure out how to set the height to 100% in order to make it responsive.
I have tried to set the height via height: document.getElementById('media').offsetHeight but it does not work.
Any help would be greatly appreciated!
Chris
Hello!
Thank you for your work, i love it.
Are there are any possibilities to add custom waveform image or something else before pre-render/pre-decode and allow play audio?
Thanks!
I have never noticed this, but a few customers of mine have mentioned that the audio quality changes. When investigating I noticed that the audio seems to be totally off.
http://clooud.co/media/bad-club-mix-916 play in the browser and then download the file and play in your local player. It is more noticeable starting around 1:00 to 1:12.
When I use the HTML5 audio player or disable wavesurfer the audio plays as desired.
Any ideas on what could cause this?
Please include any additional information necessary here. Including the following:
videojs 5.19.2 and videojs-wavesurfer's responsive branch.
Chrome 58
macOS
Waveform is not rendering in V2.2.0 and V2.2.2 possible because of latency in rendering the DOM.
On a really simple stripped down version I can get it to work but when used inside my app, the element fails to be rendered with a height value
Examining the element inspector I can see that wavesurfer is replacing the object with a
var rect = this.player.el_.getBoundingClientRect();
This seems like it should derive the height of the container.
The resulting height, width etc.. are all zero unless I insert a time delay of about 700ms. This points towards a latency issue in the container size.
However, even with this delay the waveform fails to render. I can only think because the waveform is also being derived before the container height is rendered. I just can't find where this is or am I completely barking up the wrong tree.
Thanks in advance
Happens on loading the file.
No errors are indicated
Video.js 6.1.0, wavesurfer 2.0.3, videojs-waversurfer plugin 2.2.0 and 2.2.2
Chrome 65 and Firefox 59.0.1
Mac OSX,
Forgive me if this is an obvious question, but I wonder if it is possible for me to programatically toggle the waveform while video/audio is playing? I'd like to allow users to switch between waveform view and the regular content of the video.
things like timeline, regions, etc plugins.
I use this snippet to modify one of my arrays.
Array.prototype.resize = function(newSize, defaultValue) {
while(newSize > this.length)
this.push(defaultValue);
this.length = newSize;
};Explain in detail the exact steps necessary to reproduce the issue.
Just implement this and you will receive this error message
Please describe what you expected to see.
How is this affecting the wavesurfer? I can't find the problem :(
Please describe what actually happened.
If there are any errors at all, please include them here.
VIDEOJS: ERROR: TypeError: uiElements[element].el is not a function
at constructor.setupUI (videojs.wavesurfer.js:128)
at HTMLDivElement.e (video.min.js:18)
at HTMLDivElement.e (video.min.js:18)
at HTMLDivElement.d.dispatcher.d.dispatcher (video.min.js:18)
at Object.k [as trigger] (video.min.js:18)
at b.a.trigger (video.min.js:12)
at b.<anonymous> (video.min.js:12)
at e (video.min.js:18)
c.logByType @ video.min.js:18
i.error @ video.min.js:18
d.dispatcher.d.dispatcher @ video.min.js:18
k @ video.min.js:18
a.trigger @ video.min.js:12
(anonymous) @ video.min.js:12
e @ video.min.js:18
Please include any additional information necessary here. Including the following:
what version of video.js and wavesurfer.js does this occur with?
5.19.1 and 1.3.7
what browser are affected?
Chrome 57, Firefox 52 and Safari
MacOS
what platforms (operating systems and devices) are affected?
Hey everyone, first of all I want to thank for this awesome player! I made a really nice skin to look nice for my website, but.. I been having issues with design elements and couple of errors which I hope some of you can help me with that.
I use Gridder v1.4 for my videos to appear once the image is clicked, and they are working just fine, I can play the video etc, but once I close and reopen the same video I get this error:
VIDEOJS: WARN: Player "(my unique id)" is already initialised. Options will not be applied.
and then all of the design disapears from the player..
Plus I have this error for each video I output on the website:
Uncaught TypeError: The element or ID supplied is not valid. (videojs)
I tryed to fix it using code which I found on other topis regarding this, but It did not work.
You can see all working website at: www.xxxtu.be (NOTE : this is an adult website!)
Any help will be appreciated!
This code is used for the gridder and placed in a very bottom of the page:
<script>
jQuery(document).ready(function ($) {
$(".gridder").gridderExpander({
scroll: true,
scrollOffset: 60,
scrollTo: "panel", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
showNav: true,
closeText: "Close",
});
});
</script>And this is code to call the player:
<div id="gridder-content-'.$row['id'].'" class="gridder-content">
<div class="player">
<script type="text/javascript">
videojs("my_video_'.$row['id'].'").ready(function(){});
</script>
<video id="my_video_'.$row['id'].'" class="video-js vjs-default-skin" width="1197px" height="673px" controls preload="none" poster="upl/cover/video/'.$row['image'].'">
<source src="v/'.$row['url'].'" type="video/mp4" />
</video>
</div>
</div>Which is abowe the gridder code.
When viewing the example using Firefox Mobile for Android it seems the native media controls are used, making it impossible to navigate etc.
This plugin is great and works well for versions of vjs 4.5 and below but changes made in vjs version 4.6.0 causes some odd playback issues.
From first glance it seems like the fact the newer versions of vjs require there needs to be a source tag inside the audio tag. If it's not there you get a spinning wheel. If you do include the source in the audio tag, you get the audio playing twice at the same time with a slight delay.
Hi,
I want to show the waveform of a big audio file (at least 100 MB, at least 1 hour).
I can't wait for the whole file to load because it takes a lot of time.
I need to show it right from the start, as it loads.
I know that I can somehow use array of "Pre-recoded Peaks", but it is heavy to receive this data from my server, so I actually can receive arrays of "Pre-recoded Peaks" in chunks, meaning every 1 second I get 10 minutes of the audio as "Pre-recoded Peaks".
But I didn't see a way to concatenate the arrays and update my existing waveform.
Is there a way I can show the waveform as it loads?
(using chunks of "Pre-recoded Peaks" or any other way?)
Thanks!
Hi,
would it be possible to make peaks param not ajax only but allow to pass array of peaks instead (as wavesurfer itself allows)?
Thx
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.