Wild track and volume scrolling

[Muetze42]

The track and volume scrolling is unusable with the desktop side. What make I wrong?
https://daysndaze.net/music2

[scottschiller]

Sorry, I must have missed the notification about this issue. 😅

Looks like you got the track scrolling sorted, but there's no progress bar. Were there issues trying to click and drag to "scrub" through it, perhaps? It might be that the mouse movement calculation of X and Y offsets were thrown off depending on how you're positioning elements in CSS.

[Muetze42]

Yeah. Hid it off. Here's the volume control that doesn't work either:
https://daysndaze.net/music2

It is also strange that when you click on Volume at the top of the address bar you will see #volume, which is not the case in the demo.

[scottschiller]

@MuetzeOfficial Huh! Probably something about the way the link click is handled, like something isn't doing event.preventDefault() and/or return false to prevent navigation to #. Worth a look.

[Muetze42]

(I made the progress bar visible again.)

How can I find the error or find out what is causing it?

[scottschiller]

@MuetzeOfficial Looking at the response headers, I think this is an issue with the MP3 file and how it's served up.

It looks like the request/response does not include partials or byte ranges, and I have a feeling that's why HTML5 clients won't want to show a duration. Byte serving is how HTML5 clients prefer to receive audio/video, in chunks or "ranges". This is what allows users to scrub or jump from one section to another, where bits can be buffered in as needed.

It's good to see content-length in there, but I think this could use a review. I've got some notes on byte serving, yonder: http://www.schillmania.com/projects/soundmanager2/doc/technotes/#byte-serving

Content-Type: audio/mpeg
Set-Cookie: id=0; expires=Fri, 23-Nov-2018 19:55:33 GMT; Max-Age=0; path=/
Set-Cookie: uid=0; expires=Fri, 23-Nov-2018 19:55:33 GMT; Max-Age=0; path=/
Keep-Alive: timeout=2, max=1000
Date: Fri, 23 Nov 2018 20:55:33 GMT
Content-Length: 1958376
Cache-Control: no-cache
Connection: Keep-Alive
Content-Transfer-Encoding: binary
Server: Apache

[scottschiller]

From what I see, soundManager.sounds.sound0.duration on your site there has a value of 0 when playing. Because of that, the progress bar isn't going to work. I think that's the crux of the issue, and duration isn't known due to something about the response headers.

[Muetze42]

The MP3 are checked via PHP, so you can't just download them without problems. Therefore the strange header...

I have included direct MP3 files in the example. The header now:

Accept-Ranges: bytes
Cache-Control: max-age=2592000
Connection: keep-alive, Keep-Alive
Content-Length: 1
Content-Range: bytes 32768-32768/3515419
Content-Type: audio/mpeg

But the volume and progress still don't work. Could this still be due to the header?

[scottschiller]

Hmm. Something maybe about that Connection header, I can't say I've seen more than one Keep-Alive value.

I would expect a direct, regular plain old MP3 link to work.
If you try loading the MP3 URL directly in the browser, does playback and scrubbing work then?

On the page I linked previously re: request/response, I'd expect to see something like this (and I think you're on the right path at least, in that regard):

Client request

    GET some.mp3 HTTP/1.1
    Range: bytes=0-

Server response

    HTTP/1.1 206 Partial Content
    Accept-ranges: bytes
    Content-length: 4237566
    Content-Range: bytes 0-4237565/7237566

I suspect the volume bit is a UI thing, not related to the way the file is served over HTTP - but I think the duration issue is HTTP-related somehow, or maybe (though unlikely), something about the MP3 itself.

SM2 should say (with ?debug=1 etc.), that it gets a metadata event and is able to determine duration with a non-zero value. This isn't something SM2 calculates, but is given from the HTML5 audio API.

[Muetze42]

Here is a direct link to one of the music files:
https://daysndaze.net/1.mp3
Playback and scrubbing work.

On the test page I included the original Javascript with debug. Maybe this helps?