Requirement
I am working on a intranet application. All the users, audio files and server are on same network but different computers.
I have displayed recording information in a grid. User should be able to select any recording from the grid and play it. I am using HTML5 and wavesufer to play audio.
Problem
When I try to set url for wavesurfer on row selection change, nothing happens, waves not loaded on wavesurfer. Although it should load the audio file.
When I set it hard-coded in HTML5, I get the below error:
wavesurfer.min.js:4 XMLHttpRequest cannot load file://nas4/Recordings/Recordings-ECN/2016/11/03/20161103185821_outbound_3525_3193.mp3. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Below is the HTML code:
<ng-wavesurfer url="\\<<audio_server>>\<<folder>>\<<file>>.mp3" wave-color="#337ab7" progress-color="#23527c" height="64">
</ng-wavesurfer>
While I load the audio file from app root folder it works fine. There are millions of audio files on on <<audio_server>>. I understand there is some security concern here while trying to load any file from local machine. But this is an intranet application and audio files are getting loaded from 3rd machine.
Additional Info
- I do not want to create a separate web server for these files.
- Chrome is the web browser.
- I am looking for some solution either in HTML5 (native-support) or ASP.net MVC (through streaming).
