HTML5 Audio stops playback when using CloudFlare proxy

I’m hosting an app on Heroku. I’m using CloudFlare’s proxy feature to route traffic from my domain to the Heroku server, as opposed to the “DNS Only” feature.

One of the features of the application is streaming music with an HTML5 Audio element. The streaming works fine, until about 5-10 minutes when the playback suddenly stops, sometimes only a little over a minute in. The player’s play/pause continues to display the “pause” icon, meaning it looks like it’s playing, but the seeker stops moving forward and the play time stays still. Manually seeking ahead as much as one second causes the playback to continue.

Note that streaming from the Heroku domain directly has no issues.

This issue is similar to HTML5 audio player issues when HTTP proxy through Cloudflare, though the one thing I’m not experiencing from that post is the “they repeat and it gets worse” portion, meaning their audio player is sometimes starting the song over, which is not happening for me. Also I’m not entirely sure but it seems to happen more frequently on mobile, as mentioned in the other post.

I’ve tried to remedy the issue by using the “DNS Only” feature, but I can’t get it working properly. I receive a “ERR_QUIC_PROTOCOL_ERROR” when trying to connect to my domain when using “DNS Only”:

I really enjoy using CloudFlare (it’s really an incredible service!), but I need to solve this issue in order to continue using it. Thank you very much for considering my situation.

I solved the issue by redirecting these specific requests to CloudFront. Streaming is great this way, and doesn’t cut out at all.