lms No audio in Safari (macOS and iOS)

I've noticed this in my own instance as well as the demo instance. Attempting to play any track will change the 'play' button to a 'pause' button, but there is no audio and the progress bar does not move.

Nov 13 '20 21:11 willcassella

Hi! Unfortunately I don't have such devices to test. Maybe you can gather some useful information from the browser debug panel or from the server? Have you tried to play with the transcoding settings (auto, force on, force off, output format) ?

Nov 13 '20 22:11 epoupon

No errors appear in the debug panel, but changing the transcode format to 'mp3' fixes the issue (for both macOS and iOS). No other format seems to work, however I think we can blame that on Safari.

Nov 13 '20 22:11 willcassella

Hmm this is strange. By default the player tries to read the native file, and fallbacks on a transcoded stream. As the native file of the demo instance are mp3 files, it should just work?

Nov 14 '20 06:11 epoupon

Testing in macOS Safari, attempting to play 'Golden Hour' from the album 'Petal' (on the demo site) refuses to play with the default transcode settings:

Enable Transcoding = Only when format is not supported
Transcode Format = Ogg/Opus

I can't adjust the settings on the demo site so I don't know what would make them work.

On my own instance, playing an mp3 with 'Enable Transcoding' set to 'Never' refuses to play, but with it set to 'Only when format is not supported' and 'Transcode Format' set to 'mp3', it enables transcoding and plays successfully. Dragging the source mp3 onto a new tab in Safari plays it just fine, so I'm not really sure what's going on.

Nov 16 '20 00:11 willcassella

Ok thanks for your investigation, it looks like there is something that is not well handled in LMS's player with native files

Nov 16 '20 08:11 epoupon

I tested on an ipad and an iphone and I confirm, transcode format mp3 does the trick indeed. Could we maybe force this particular setting to all requests being proxied with the keyword AppleWebKit ? On my reverse proxy it is how I identify all Apple devices.

Sep 19 '21 10:09 b4too

Did you notice any useful error in the logs on your apple devices (not sure it is easy to get though)?

Sep 26 '21 12:09 epoupon

Maybe this error that comes up often ? ( server side only, I do not have an apple computer so no log examination for me unfortunately ) [2021-Sep-29 16:48:01.763] 1 - [error] "Http::ResponseContinuation: WebWriteEvent::Error" I did notice also that even with the transcode option mp3, after some time ( for a 3mn music it could be at 2mn ) the song will restart from the beginning though visually the progress bar still goes on as if it wasn't reset. It will then loop indefinitely, I observed it on an iphone and on an ipad, both on firefox and safari.

Sep 29 '21 16:09 b4too

Do you have a reverse proxy that may timeout the connection? Do you reproduce when you connect directly without the reverse proxy?

Sep 29 '21 17:09 epoupon

With or without the proxy the issue stays the same, I made a little capture for you to see. At 00:55 you can see the playback suddenly stops, server side I have another error like this : [2021-Sep-29 16:48:01.763] 1 - [error] "Http::ResponseContinuation: WebWriteEvent::Error" Then I start again the song but this time with the repeat, and now from 3:13 to the end you will see the loop I was talking about.

Oct 04 '21 18:10 b4too

Well, I attest that the latest iPadOS Safari cannot play music from the web interface. How about referring to the NPR's streaming code? I am not a web programmer, so I don't know how it works, but it seems to be the best player example for iPad Safari.

If you visit https://www.npr.org, there is an "On Air Now" play button at the top-right corner. iPad Safari could play that audio stream and moreover, the stream did not stop when I turned off the screen. Whatever NPR is using, this is better than those web player interfaces of other streaming servers, because those players were stopped when turning off the screen.

Sep 06 '22 12:09 HubKing

Thanks for testing @HubKing. I guess you can't access any valuable error log on the client?

Sep 06 '22 18:09 epoupon

And more important, is it also the case with the epoupon/lms:915e114 image?

Sep 06 '22 18:09 epoupon

Nah, Safari on iPad still can't play music with that Docker image. I don't know how to access debug output of iPad Safari. If the same problem happens on mac Safari, it probably easier to get debug output of mac Safari. Anyway, here is the server's log when I tried to play an MP3 song in iPad Safari.

Attaching to lms
lms  | ARG = /usr/bin/lms
lms  | ARG = --config=/var/lms/wt_config.xml
lms  | ARG = --docroot=/usr/share/lms/docroot/;/resources,/css,/images,/js,/favicon.ico
lms  | ARG = --approot=/usr/share/lms/approot
lms  | ARG = --deploy-path=/
lms  | ARG = --resources-dir=/usr/share/Wt/resources
lms  | ARG = --http-port=5082
lms  | ARG = --http-address=0.0.0.0
lms  | ARG = --threads=8
lms  | [2022-Sep-06 22:25:44.475] 1 - [info] "config: reading Wt config file: /var/lms/wt_config.xml (location = '/usr/bin/lms')"
lms  | [2022-Sep-06 22:25:44.475] 1 - [info] - [UTILS] Starting IO context with 8 threads...
lms  | [2022-Sep-06 22:25:44.475] 1 - [info] - [DB] Creating connection pool on file /var/lms/lms.db
lms  | [2022-Sep-06 22:25:44.489] 1 - [error] - [DB] Cannot create tables: Sqlite3: create table "cluster_type" (
lms  |   "id" integer primary key autoincrement,
lms  |   "version" integer not null,
lms  |   "name" text not null,
lms  |   "scan_settings_id" bigint,
lms  |   constraint "fk_cluster_type_scan_settings" foreign key ("scan_settings_id") references "scan_settings" ("id") on delete cascade deferrable initially deferred
lms  | ): table "cluster_type" already exists
lms  | [2022-Sep-06 22:25:44.489] 1 - [info] - [DB] Database version = 37, LMS binary version = 37
lms  | [2022-Sep-06 22:25:44.496] 1 - [info] - [COVER] JPEG export quality = 75
lms  | [2022-Sep-06 22:25:44.496] 1 - [info] - [COVER] Default cover path = '/usr/share/lms/approot//images/unknown-cover.jpg'
lms  | [2022-Sep-06 22:25:44.496] 1 - [info] - [COVER] Max cache size = 30000000
lms  | [2022-Sep-06 22:25:44.496] 1 - [info] - [COVER] Max file size = 10000000
lms  | [2022-Sep-06 22:25:44.496] 1 - [info] - [COVER] Preferred file names: cover,front
lms  | [2022-Sep-06 22:25:44.511] 1 - [info] - [METADATA] Creating TagLib parser with read style = accurate
lms  | [2022-Sep-06 22:25:44.511] 1 - [info] - [DB UPDATER] skipDuplicateRecordingMBID = 0
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [DB UPDATER] Using scan settings version 1
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [SCROBBLING] Starting service...
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [RECOMMENDATION] Reloading recommendation engines...
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [SCROBBLING] [listenbrainz] - Starting Listens synchronizer, maxSyncListenCount = 1000, _syncListensPeriod = 1 hours
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [SCROBBLING] [listenbrainz] - Starting Feedbacks synchronizer, maxSyncFeedbackCount = 1000, _syncFeedbacksPeriod = 1 hours
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [SCROBBLING] [listenbrainz] - Starting ListenBrainz scrobbler... API endpoint = 'https://api.listenbrainz.org'
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [SCROBBLING] Service started!
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] - [MAIN] Starting server...
lms  | [2022-Sep-06 22:25:44.512] 1 - [info] "WServer/wthttp: initializing built-in wthttpd"
lms  | [2022-Sep-06 22:25:44.513] 1 - [info] - [RECOMMENDATION] Initializing engine 'clusters'...
lms  | [2022-Sep-06 22:25:44.513] 1 - [info] - [RECOMMENDATION] Initializing engine 'clusters': complete
lms  | [2022-Sep-06 22:25:44.513] 1 - [info] - [RECOMMENDATION] Recommendation engines loaded!
lms  | [2022-Sep-06 22:25:44.513] 1 - [info] - [DB UPDATER] Scheduling next scan
lms  | [2022-Sep-06 22:25:44.513] 1 - [info] - [DB UPDATER] Using scan settings version 1
lms  | [2022-Sep-06 22:25:44.513] 1 - [info] - [DB UPDATER] Auto scan disabled!
lms  | [2022-Sep-06 22:25:44.515] 1 - [info] "wthttp: started server: http://0.0.0.0:5082"
lms  | [2022-Sep-06 22:25:44.515] 1 - [info] - [MAIN] Now running...
lms  | [2022-Sep-06 22:25:53.963] 1 - [info] "Wt: session created (#sessions = 1)"
lms  | [2022-Sep-06 22:25:53.963] 1 [/ nYXN2KISHQ2GLRhI] [info] "WEnvironment: UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15"
lms  | [2022-Sep-06 22:25:53.963] 1 [/ nYXN2KISHQ2GLRhI] [info] "Wt: signal from dead session, sending reload."
lms  | [2022-Sep-06 22:25:53.963] 1 - [info] "WebController: Removing session nYXN2KISHQ2GLRhI"
lms  | [2022-Sep-06 22:25:53.963] 1 [/ nYXN2KISHQ2GLRhI] [info] "Wt: session destroyed (#sessions = 0)"
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:53.964] "POST /?wtd=HAntcZCpPbJhDWKc HTTP/1.1" 200 76
lms  | [2022-Sep-06 22:25:54.450] 1 - [info] "Wt: session created (#sessions = 1)"
lms  | [2022-Sep-06 22:25:54.450] 1 [/ nrB8gPIOn3WCwdmB] [info] "WEnvironment: UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15"
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:54.451] "GET /release/1 HTTP/1.1" 200 2359
lms  | [2022-Sep-06 22:25:54.978] 1 [/ nrB8gPIOn3WCwdmB] [warning] "WApplication: WApplication::addMetaHeader() with no effect"
lms  | [2022-Sep-06 22:25:54.991] 1 [/ nrB8gPIOn3WCwdmB] [info] - [UI] User 'test' logged in from '172.21.0.1', user agent = Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:54.999] "GET /?wtd=nrB8gPIOn3WCwdmB&request=style&page=1 HTTP/1.1" 200 114
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.006] "GET /?wtd=nrB8gPIOn3WCwdmB&sid=1136279323&webGL=true&scrW=1024&scrH=1366&tz=540&tzS=Asia%2FTokyo&htmlHistory=true&deployPath=%2F&request=script&rand=2342578998 HTTP/1.1" 200 42030
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.010] "GET /css/lms.css HTTP/1.1" 304 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.019] "GET /css/bootstrap.solar.min.css HTTP/1.1" 304 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.020] "GET /resources/webkit-transitions.css HTTP/1.1" 304 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.022] "GET /resources/font-awesome/css/font-awesome.min.css HTTP/1.1" 304 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.047] "GET /js/bootstrap.bundle.min.js HTTP/1.1" 304 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.065] "GET /js/mediaplayer.js HTTP/1.1" 304 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.088] "POST /?wtd=nrB8gPIOn3WCwdmB HTTP/1.1" 200 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.230] "GET /resources/font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0 HTTP/1.1" 304 0
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.239] "GET /?wtd=nrB8gPIOn3WCwdmB&request=resource&resource=on7g3fg&ver=1&releaseid=1&size=512 HTTP/1.1" 200 18788
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.260] "POST /?wtd=nrB8gPIOn3WCwdmB HTTP/1.1" 200 627
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.501] "GET /release/?wtd=nrB8gPIOn3WCwdmB&request=resource&resource=on7g3fn&ver=1&trackid=4 HTTP/1.1" 206 2
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.501] "POST /?wtd=nrB8gPIOn3WCwdmB HTTP/1.1" 200 3540
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.537] "GET /?wtd=nrB8gPIOn3WCwdmB&request=resource&resource=on7g3fg&ver=1&releaseid=2&size=128 HTTP/1.1" 200 2482
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.538] "GET /?wtd=nrB8gPIOn3WCwdmB&request=resource&resource=on7g3fg&ver=1&releaseid=2&size=512 HTTP/1.1" 200 15507
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.540] "GET /?wtd=nrB8gPIOn3WCwdmB&request=resource&resource=on7g3fg&ver=1&releaseid=1&size=128 HTTP/1.1" 200 2812
lms  | 172.21.0.1 - - [2022-Sep-06 22:25:55.570] "GET /release/?wtd=nrB8gPIOn3WCwdmB&request=resource&resource=on7g3fn&ver=1&trackid=4 HTTP/1.1" 206 5289384
lms  | [2022-Sep-06 22:25:56.024] 1 [/ nrB8gPIOn3WCwdmB] [info] - [TRANSCODE] [0] - Transcoding file '/music/file_example_MP3_5MG.mp3'
lms  | [2022-Sep-06 22:25:56.235] 1 - [error] "Http::ResponseContinuation: WebWriteEvent::Error"
lms  | 172.21.0.1 - - [2022-Sep-06 22:26:04.944] "GET /release/?wtd=nrB8gPIOn3WCwdmB&request=resource&resource=on7g3fg&ver=1&trackid=4&size=128 HTTP/1.1" 200 2482
lms  | 172.21.0.1 - - [2022-Sep-06 22:26:45.551] "POST /?wtd=nrB8gPIOn3WCwdmB HTTP/1.1" 200 0

Sep 06 '22 22:09 HubKing

Just had the same issue. I fixed it by setting encode to "always" and "mp3" in settings. Then both Safari and iOS browsers will work.

Oct 28 '22 15:10 sommerper

Thanks for reporting this. Is this needed even for mp3 files? I mean is forcing transcode to the same format a workaround?

Oct 28 '22 15:10 epoupon

Yep. I only have mp3 files and had to do it anyway.

Oct 29 '22 15:10 sommerper

Ok, and if you set to transcode only if needed to mp3, does it work ?

Oct 29 '22 20:10 epoupon

No, that was the default and it does not work. It has to be set to always.

Oct 29 '22 22:10 sommerper

Ok, would you accept to test a change? If yes, which lms version are you using (arch, docker)?

Oct 30 '22 07:10 epoupon

Sure. I'm using the docker version.

Oct 30 '22 12:10 sommerper

Amd64?

Oct 30 '22 15:10 epoupon

I’ve been using docker version on arm (pi4) but I can also test on my intel machine. It will just take a little longer because of some network settings.

Oct 30 '22 16:10 sommerper

Ok and last question: 32 or 64bits?

Oct 30 '22 17:10 epoupon

And another last question: what if you set to never transcode?

Oct 30 '22 20:10 epoupon

64bits for both arm and intel.

never transcode does not work. It has to be on always and mp3

Oct 30 '22 21:10 sommerper

I'm looking at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

Loading a pure form .mp3 works fine, the exact sample works fine in Safari.

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            <a href="/media/cc0-audio/t-rex-roar.mp3">
                Download audio
            </a>
    </audio>
</figure>

Substituting what is being provided from LMS fails.

<html>

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio
        controls
        src="http://192.168.50.3:5082/release/?wtd=IFo8nVj1vpJcrs0f&request=resource&resource=o1litfg&ver=1&trackid=2885">
            <a href=".?wtd=IFo8nVj1vpJcrs0f&amp;request=resource&amp;resource=o1litff&amp;ver=1&amp;trackid=2885&amp;bitrate=320000&amp;format=2">
                Download audio
            </a>
    </audio>
</figure>

</html>

But that works in Firefox. However, looking at the spec if you specify the codec, it works fine in Safari.

<html>

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
    <audio controls>
        <source src="http://192.168.50.3:5082/release/?wtd=IFo8nVj1vpJcrs0f&request=resource&resource=o1litfg&ver=1&trackid=2885" type="audio/mpeg" />
    </audio>
</figure>

</html>

I am not quite sure how this is formed in the code yet, but will try to branch it and test it. I am not quite sure how you determine if transcoding needs to occur or not.

For reference how LMS will format the audio tags.

This example works. I suspect rather than a dynamic tagging system, targeting both mpeg and ogg. Seems reasonable to edit the template.

https://thepaciellogroup.github.io/AT-browser-tests/test-files/audio.html

https://github.com/epoupon/lms/blob/6898a4096a7d4f999f08102f26b92d48a64d75e1/approot/mediaplayer.xml

Feb 10 '23 03:02 obiwantoby

I have forked this and am trying some changes. I think it is reasonable to use a conditional here. Otherwise need to define the relationship between transcode or not, still not sure how that is triggered, how does it know to transcode?

/workspaces/lms/docroot/js/mediaplayer.js

Kinda hate JS, but using some references ... we should prefer the higher quality ogg vorbis format first. Issue here still is if transcoding is set to something other than what the browser supports. Probably need to rethink the tagging and transcoding relationship - in the same file.

http://diveintohtml5.info/everything.html

	let acodec = document.createElement('audio');
		if (!!(acodec.canPlayType && acodec.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''))) {
			source.type= 'audio/ogg';
		} else {
			source.type= 'audio/mpeg';
		}

Will see if I can test it and do a pull request.

The other logical solution ... exotic.

https://stackoverflow.com/a/41706900

Feb 10 '23 04:02 obiwantoby

Thanks for investigating this!

For the record:

if you select transcode "only when format is not supported", LMS exposes two audio sources and expect the browser to fallback if necessary to the second one if the first one is not supported:
- a first audio source that points to the "raw" file resource
- a second audio source that points to the transcoded file resource
if you select transcode "never", only the "raw" file resource is exposed
if you select "always", only the transcoded file resource is exposed.

The transcoded file resource sets the mimetype in its response, so thanks to your investigations I think this is why it works. The raw file resource does not provide it, and indeed it looks like this makes Safari unhappy (not sure why it does not try to fallback to the second source though) So I guess all we have to do is to set the proper mimetype for the "raw" resource. Will try this asap.

Feb 11 '23 13:02 epoupon

@obiwantoby could you by chance test the epoupon/lms:bf0f8b7 docker image?

Feb 11 '23 14:02 epoupon

lms lms copied to clipboard

No audio in Safari (macOS and iOS)

lms
lms copied to clipboard