wavesurfer.js - getting it to work in browsers other than Firefox
Question
I'm looking for an html5 audio and video player that has a waveform. I found wavesurfer.js, but that looks like just audio. But hey, I thought I'd play around with it. Here is some very simple code (this is just me with an html file on my desktop - and wav was converted to PCM. Though, I've tried this with a wav and mp3):
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<script>
var wavesurfer = Object.create(WaveSurfer);
document.addEventListener('DOMContentLoaded', function () {
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686'
});
wavesurfer.load('session.wav');
});
wavesurfer.on('ready', function () {
wavesurfer.play();
});
</script>
</head>
<body>
<div id="waveform"></div>
</body>
</html>
This couldn't get any simpler! OK, let's open this in Firefox:
Great! It starts playing. I have a waveform. Awesome!
Now Chrome (or Edge - both do the same):
Absolutely nothing ( scratches head ). No sound. Nothing.
OK, I found this link here: https://wavesurfer-js.org/example/audio-element/
It says: wavesurfer.js will automatically fallback to HTML5 Media if Web Audio is not supported. However, you can choose to use audio element manually. Simply set the backend option to "MediaElement"
Without googling (listen I'm jumping in the pool feet first here!), I guess I don't know the exact difference between HTML 5 Media and Web Audio. Or my assumption off my head is Web Audio means the HTML 5 Audio tag, which is different from HTML 5 Media How? Not sure yet. I know nothing.
Regardless, I'll change that code I posted above and add one line of code to the init function:
wavesurfer.init({
container: '#waveform',
waveColor: '#A8DBA8',
progressColor: '#3B8686',
backend: 'MediaElement'
});
Running in Chrome now, I get:
It plays. But no waveform.
I mean, I go to the wavesurfer.js website with Chrome and all the demos work. I don't get it. On top of that, I'm concerned about forcing things with the 'MediaElement' backend property.
What am I missing?
EDIT: Oh for goodness sake. I took the same html5.html file (without the back end 'MediaElement' property) and session.wav file and placed them on a web server (IIS). Now, I'm fetching the page through a web server instead of working local to my desktop. Works in Edge and Chrome (and Opera - tried that too!) - No problem. Must be something about working locally that Chrome and Edge don't like. I'll leave this question open - green check marks await for that person that adds valuable info!
1 answers
solution1
2 ACCPTED 2017-07-18 20:36:03
Chrome (in an effort to maintain better security involving file system access) prevents the dynamic loading of anything from the file protocol. This (as well as a deep discussion about why this is both a good idea and a bad idea) is referenced here:
https://bugs.chromium.org/p/chromium/issues/detail?id=47416
My personal favorite quote is this one (I have so been this guy in the past):
Your local file policy is 'over the top' as regards security and I urge you to reconsider, please don't fall into the trap of making your browser so secure that it ceases to be useful or usable. Allow the user to decide as Microsoft do with a simple option choice or, God help me, another yellow bar.
You can disable this by launching Chrome with the command line argument --allow-file-access-from-files or by (as you found out) just spinning up a web server, if you want an even easier server I would recommend Python's SimpleHTTPServer which you can start from any directory (in Windows, Mac OSX and Linux) by typing python -m SimpleHTTPServer 8000 (it comes standard with any version of Python)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.