scottschiller / SoundManager2

A JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio + RTMP, providing reliable cross-browser/platform audio control in as little as 12 KB. BSD licensed.
http://www.schillmania.com/projects/soundmanager2/
Other
4.99k stars 768 forks source link

Progress bar issue. If i click on the progress bar then it is playing from the beginning #170

Closed RameshNaikAspect closed 7 years ago

RameshNaikAspect commented 7 years ago

Hi, I have used AngularJS sound manager(). While playing If i click on the progress bar then it is playing from the beginning, how do i start from the selected position. This issue is happening only on Chrome. This is my HTML code: <sound-manager></sound-manager> <div class="mv-vmPlayer"> <ul> <li><button id="playPreviousTrack" ng-attr-title="{{localize.ux.messageViewer.PlayPrev_btn_label}}" ng-click="widget.onPlayPrevVMClick()" ng-disabled="widget.playPrevDisable"><i class='icon-arrow-left'></i></button></li> <li><button id="playNextTrack" ng-attr-title="{{localize.ux.messageViewer.PlayNext_btn_label}}" ng-click="widget.onPlayNextVMClick()" ng-disabled="widget.playNextDisable"><i class='icon-arrow-right'></i></button></li> <li><button ng-click="widget.pauseTrack()" ng-attr-title="{{localize.ux.messageViewer.Pause_btn_label}}" ng-disabled="!widget.isPlaying"><i class='icon-pause'></i></button></li> <li><button id="playTrack" ng-attr-title="{{localize.ux.messageViewer.Play_btn_label}}" ng-click="widget.onPlayVMClick()" ng-disabled="widget.playDisable"><i class='icon-play'></i></button></li> <span id="spnEmbedTag"></span> <!--<li><button id="widget.playVM" ng-click="widget.onPlayVMClick()" ng-disabled="widget.playDisable"><i class='icon-play'></i></button>--> <li><label>&nbsp;</label></li> <li><label>&nbsp;</label></li> <li><label>&nbsp;</label></li> <li><label>{{ widget.currentPosition }}</label></li> <li> <div class="seekBase" seek-track> <div id= "seekLoad" class="seekLoad mv-blue" ng-style="widget.progressVMStyle"></div> </div> </li> <li><label id="currDur">{{ currentDuration }}</label></li> <li><label>{{ widget.fileName }}</label></li> <li class="lastli"><button id="chngPin" ng-attr-title="{{localize.ux.messageViewer.ChangePin}}" ng-click="widget.onChangePinOpen()"><i class='glyph-password'></i></button></li> </ul> </div>

Can some one help me on this ?

scottschiller commented 7 years ago

Your code is probably OK, I'm guessing here. The issue might be the way that Chrome is making requests for the audio file. Maybe try the SM2 demos on the homepage and see if they work OK for your version of Chrome.

If there's something funny with the offset handling of your mouse / click handlers, I could see that resulting in Chrome getting a setPosition(0) somehow and thus playing from the beginning of the sound mistakenly. Because of that, I recommend checking the SM2 demo and make sure your browser does the right thing there.

A bit more about how clients download / request audio, here - http://www.schillmania.com/projects/soundmanager2/doc/technotes/#client-requests

RameshNaikAspect commented 7 years ago

Thank you Dear, I see the issue is with the .wave file format. if i play .mp3 it works fine with my code.

Any suggestion will be helpful to me.

scottschiller commented 7 years ago

Sounds like an issue with .wav in Chrome, or perhaps the way you're serving up the file. Something to test: Try browsing directly to the .wav file URL in Chrome (i.e., put the sound URL in the address bar) and see if seeking works there when Chrome is doing playback inline. It may be Chrome doesn't like the way this file is encoded, or served.

To help eliminate network issues, I'd try saving the .wav on disk and then dragging + dropping it into Chrome and seeing if playback works there as well.

SM2 should allow you to seek and set position within .wav files, provided that Chrome is able to start playback.

RameshNaikAspect commented 7 years ago

Yes you are right. When i play through local file or other link then it is working fine.

but how can i make it work with the given link my link is something like this: https://myown-cloud.net/Adapter/vm/get?key=vm/4700&filename=ovapd229966af22b9sdccd8aagsa8c9f11e7050.wav&Authorization=Bearer%20c53a3b9aa-4f58-47ag5-a0f6f-f14d905ad6789

Note: I am using soundmanage2.

Any suggestions ???

scottschiller commented 7 years ago

If it works locally, then network is probably the issue - i.e., HTTP/HTTPS header responses are probably contributing to the problem. Take a close look at the server response for the .wav in question. I recommend comparing vs. a typical / vanilla Apache server response.

RameshNaikAspect commented 7 years ago

Its working fine with HTTP/HTTPS. I see that the issue is with the Query related URLs. like below: "http://localhost:58161/Demo/downloadFile?key=voicemail/11&filename=ovapeeecc00964b2ee4c8c8011e78d1c5dda72efd945.wav&Authorization=Bearer%20e088bcfa-3b8c-4dea-84a8-a8519443d8a0"

soundmanager2 doesn't support query urls ? If not can you suggest me the way for it ?

RameshNaikAspect commented 7 years ago

Any updates on this ?

scottschiller commented 7 years ago

@RameshNaikAspect: Late reply, apologies. SM2 doesn't do anything special with HTTP requests, it only creates Audio() objects and tells the browser to play them. The browser is in control of network requests and decoding sound.

If you load the sound URL directly in Chrome, you should get the inline HTML5-style player built into Chrome. My guess is seeking and playback will behave similarly in that case to what you are seeing with SM2.

If there is a playback issue, it is likely down to something with the encoding of the file tripping up Chrome's decoding and playback, or, there is an issue with the way the file is being served over HTTP/HTTPS from your server.

I suggest looking at the network requests for the audio asset - chances are your key and filename and authorization are the issue, tripping up playback requests in this case. If you do any HTTP redirects, for example, that might mess up seeking of the file if each request means there is a redirect to the audio asset.

I wager it's your URL params and auth scheme causing the problem, here. It's likely the client is making byte range requests and being thrown off by your server's response.

For example, the browser is likely saying "Please serve me byte ranges from X-Y", and your server is responding with "OK, your auth is valid. Here is a 3xx redirect to the OGG."

Again, this is likely not to be compatible with HTML5 clients if your server indicates that it supports byte serving (range requests / partials.) The client will ask for the file in pieces, and your backend controller will need to be able to handle that. Alternately, you can update your controller to not indicate support for range requests in its response, and then the client should make a traditional "progressive" request for the entire contents of the file, similar to a file download vs. requesting pieces at a time.

See this section on byte serving for examples. www.schillmania.com/projects/soundmanager2/doc/technotes/#byte-serving

RameshNaikAspect commented 7 years ago

Thank Scottschiller.

We have found the solution. The issue was with the response header. Player needs response header to include Accept-Ranges:bytes

After including this tag in the response header the issue got resolved (but not sure why it requires only in Chrome as Firefox is working fine without this tag).