No audio in Safari (macOS and iOS) #105

willcassella · 2020-11-13T21:31:42Z

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.

epoupon · 2020-11-13T22:19:56Z

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) ?

willcassella · 2020-11-13T22:29:08Z

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.

epoupon · 2020-11-14T06:24:35Z

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?

willcassella · 2020-11-16T00:38:13Z

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.

epoupon · 2020-11-16T08:14:43Z

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

b4too · 2021-09-19T10:58:04Z

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.

epoupon · 2021-09-26T12:31:14Z

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

b4too · 2021-09-29T16:51:34Z

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.

epoupon · 2021-09-29T17:11:32Z

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

b4too · 2021-10-04T18:03:08Z

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.

HubKing · 2022-09-06T12:59:35Z

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.

epoupon · 2022-09-06T18:13:24Z

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

epoupon · 2022-09-06T18:14:40Z

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

HubKing · 2022-09-06T22:32:57Z

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

sommerper · 2022-10-28T15:12:52Z

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.

epoupon · 2022-10-28T15:35:33Z

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

sommerper · 2022-10-29T15:49:29Z

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

epoupon · 2022-10-29T20:10:22Z

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

sommerper · 2022-10-29T22:32:22Z

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

epoupon · 2022-10-30T07:42:50Z

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

sommerper · 2022-10-30T12:19:51Z

Sure. I'm using the docker version.

epoupon · 2022-10-30T15:13:52Z

Amd64?

sommerper · 2022-10-30T16:42:00Z

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.

epoupon · 2022-10-30T17:15:16Z

Ok and last question: 32 or 64bits?

epoupon · 2022-10-30T20:33:02Z

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

sommerper · 2022-10-30T21:33:07Z

64bits for both arm and intel.

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

obiwantoby · 2023-02-10T03:55:59Z

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

obiwantoby · 2023-02-10T04:49:51Z

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

epoupon · 2023-02-11T13:38:30Z

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.

epoupon · 2023-02-11T14:27:08Z

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

obiwantoby · 2023-02-11T18:35:28Z

Yeah, I can switch around from the one I compiled, will report back.

epoupon · 2023-02-11T19:33:03Z

Thanks! you can also just apply bf0f8b7 if it is easier for you

obiwantoby · 2023-02-19T16:04:01Z

Safari desktop seems fine. Safari iOS is better but is failing on some FLAC collections, that otherwise worked. Trying to play around with it more.

obiwantoby · 2023-02-22T15:28:31Z

Confirmed epoupon/lms:bf0f8b7 fails on iOS.

epoupon · 2023-02-22T20:19:38Z

Confirmed epoupon/lms:bf0f8b7 fails on iOS.

Does it fail for all files or just for flac files?

obiwantoby · 2023-02-23T01:29:35Z

Well no, other files, of which I only have MP3 and some AAC are fine. FLAC fails, but only on iOS. where as before everything would play.

epoupon · 2023-02-23T13:06:30Z

Ok thanks for testing! Will merge this first fix then, since it is better than before.

willcassella closed this as completed Nov 13, 2020

bmsleight mentioned this issue Nov 15, 2020

Http::ResponseContinuation: WebWriteEvent::Error #106

Closed

epoupon reopened this Nov 16, 2020

epoupon added bug help wanted labels Nov 16, 2020

cacko mentioned this issue Jan 14, 2022

wait for user interaction before creating audio context #194

Closed

obiwantoby mentioned this issue Feb 10, 2023

Bugfix safari mediaplayer closes #105 #307

Closed

epoupon added a commit that referenced this issue Feb 11, 2023

Set mime type for raw resource. ref #105

bf0f8b7

epoupon mentioned this issue Feb 23, 2023

No audio on Safari IOS for flac files #310

Open

epoupon closed this as completed Feb 23, 2023

No audio in Safari (macOS and iOS) #105

No audio in Safari (macOS and iOS) #105

Comments

willcassella commented Nov 13, 2020

epoupon commented Nov 13, 2020

willcassella commented Nov 13, 2020

epoupon commented Nov 14, 2020

willcassella commented Nov 16, 2020

epoupon commented Nov 16, 2020

b4too commented Sep 19, 2021

epoupon commented Sep 26, 2021

b4too commented Sep 29, 2021 • edited Loading

epoupon commented Sep 29, 2021

b4too commented Oct 4, 2021

HubKing commented Sep 6, 2022

epoupon commented Sep 6, 2022

epoupon commented Sep 6, 2022

HubKing commented Sep 6, 2022

sommerper commented Oct 28, 2022

epoupon commented Oct 28, 2022

sommerper commented Oct 29, 2022

epoupon commented Oct 29, 2022

sommerper commented Oct 29, 2022

epoupon commented Oct 30, 2022

sommerper commented Oct 30, 2022

epoupon commented Oct 30, 2022

sommerper commented Oct 30, 2022

epoupon commented Oct 30, 2022

epoupon commented Oct 30, 2022

sommerper commented Oct 30, 2022 • edited Loading

obiwantoby commented Feb 10, 2023 • edited Loading

obiwantoby commented Feb 10, 2023 • edited Loading

epoupon commented Feb 11, 2023

epoupon commented Feb 11, 2023

obiwantoby commented Feb 11, 2023

epoupon commented Feb 11, 2023

obiwantoby commented Feb 19, 2023

obiwantoby commented Feb 22, 2023

epoupon commented Feb 22, 2023

obiwantoby commented Feb 23, 2023

epoupon commented Feb 23, 2023

b4too commented Sep 29, 2021 •

edited

Loading

sommerper commented Oct 30, 2022 •

edited

Loading

obiwantoby commented Feb 10, 2023 •

edited

Loading

obiwantoby commented Feb 10, 2023 •

edited

Loading