Author Topic: Getting there with a new html5 audio player  (Read 2194 times)

EmmaS

  • Jr. Member

  • Offline
  • **
  • 93
  • Personal Text
    I don't fail... I find ways that don't work.
    • StewartsWebWorks
Getting there with a new html5 audio player
« on: May 26, 2020, 04:41:56 PM »
After days of different variations in trying to incorperate an analyser like I have on my Sweepers page...

https://www.xperiencerewind.co.uk/sweepers.php

I've finally managed to get my html5 player with shoutcast stream working with the analyser, for some reason, which I don't know if it's me but not working in Chrome  :-X



https://www.xperiencerewind.co.uk/mobile.php

Any Idea's of why Chrome isn't allowing audio to work ?
XperienceRewind.co.uk - 70s and 80s None Stop
https://www.xperiencerewind.co.uk/

XperienceRadio.co.uk - Club Dance & Trance
https://www.xperienceradio.co.uk/

DJ Garybaldy

  • Global Moderator
  • Hero Member

  • Offline
  • *****
  • 4671
  • Personal Text
    Don't Shoot! I'm only the Moderator
    • DJ Garybaldy Blog
Re: Getting there with a new html5 audio player
« Reply #1 on: May 26, 2020, 04:56:42 PM »
Theres been some change in Chrome where it won't play stream with just http:// it requires them to be https://

Lots of people having issues with Chrome and the Shoutcast stations on the website/directory.

Blame Google its their fault....
Proud USER of RadioDJ since 2010

RadioDJ is my most FAVOURITE piece of software EVER

https://djgarybaldy.blogspot.com

Install RadioDJ: https://djgarybaldy.blogspot.com/2020/08/how-to-install-radiodj-free-radio.html

Radio: https://djgarybaldy.blogspot.com/p/radio.html

EmmaS

  • Jr. Member

  • Offline
  • **
  • 93
  • Personal Text
    I don't fail... I find ways that don't work.
    • StewartsWebWorks
Re: Getting there with a new html5 audio player
« Reply #2 on: May 26, 2020, 05:08:56 PM »
Theres been some change in Chrome where it won't play stream with just http:// it requires them to be https://

Lots of people having issues with Chrome and the Shoutcast stations on the website/directory.

Blame Google its their fault....

I've just changed to https and although the buttons show in Chrome now, still no progress... hmmmm
Not sure why they've changed so hope for everyones sake they'll fix it.
XperienceRewind.co.uk - 70s and 80s None Stop
https://www.xperiencerewind.co.uk/

XperienceRadio.co.uk - Club Dance & Trance
https://www.xperienceradio.co.uk/

EmmaS

  • Jr. Member

  • Offline
  • **
  • 93
  • Personal Text
    I don't fail... I find ways that don't work.
    • StewartsWebWorks
Re: Getting there with a new html5 audio player
« Reply #3 on: May 26, 2020, 05:59:14 PM »
Seems like a bit of a pain but.....

In Chrome, Click the padlock next to URL, then goto Settings...
In the list, "Allow" Sound from "Automatic (Default)"

This worked
XperienceRewind.co.uk - 70s and 80s None Stop
https://www.xperiencerewind.co.uk/

XperienceRadio.co.uk - Club Dance & Trance
https://www.xperienceradio.co.uk/

DJ Garybaldy

  • Global Moderator
  • Hero Member

  • Offline
  • *****
  • 4671
  • Personal Text
    Don't Shoot! I'm only the Moderator
    • DJ Garybaldy Blog
Re: Getting there with a new html5 audio player
« Reply #4 on: May 26, 2020, 06:11:52 PM »
I rarely use Chrome... I do any audio work with Firefox. You know checking the stream is still running that type of thing.
Proud USER of RadioDJ since 2010

RadioDJ is my most FAVOURITE piece of software EVER

https://djgarybaldy.blogspot.com

Install RadioDJ: https://djgarybaldy.blogspot.com/2020/08/how-to-install-radiodj-free-radio.html

Radio: https://djgarybaldy.blogspot.com/p/radio.html

Rob Ashcroft

  • Full Member

  • Offline
  • ***
  • 163
    • Radio KPS
Re: Getting there with a new html5 audio player
« Reply #5 on: May 27, 2020, 09:58:37 AM »
In Chrome, Click the padlock next to URL, then goto Settings...
In the list, "Allow" Sound from "Automatic (Default)"

That's a good solution for individuals, although not really a complete solution for embedding in a site that you expect lots of people to visit who may not know, or wish to try, that solution.

The 'Chrome' issue due to it's change to not allow 'mixed content'.  This will likely follow in other browsers too.  So unless you can have your audio stream to be authenticated as secure (HTTPS) then it will not play within an HTTPS website. (I guess if you had an HTTP website, then it would work with an HTTP stream?

We have this issue with our school radio station.  The (Google) website is HTTPS, but our locally hosted Shoutcast Stream is not.  The stream will play if using an App such as TuneIn, but not within our website via Chrome where we previously used a TuneIn embedded player.

Our current work-around has only been to move away from stream being embedded in our site, and a direct link to the stream audio.  Not pretty, but has to do at this stage.
https://www.radiokps.nz has a link that goes to http://210.54.147.177:8000/;
http://radiokps.nz

bill

  • New User

  • Offline
  • *
  • 37
Re: Getting there with a new html5 audio player
« Reply #6 on: May 27, 2020, 11:24:50 PM »
EmmaS  I believe that your PHP ability far exceeds mine so please take my suggestions only as that. Suggestions. That is what I like about these RadioDJ forums; where we work hard at something and get exhausted someone with fresh eyes can have the solution or at least point us in the right direction.

DJGary is right Google is making things harder on streamers that self host their streams or developers just trying to get the bugs before going live with their project.
Rob is also right in that changing the settings will only work on individual basis.

A few suggestions while building the project on local LAN or maybe useful if using VPS...

PHP script as a proxy in SSL host with a mpeg header pointing to non SSL stream. Long term however I think this causes memory leaks. I'm not sure.

Spin up a VM with an Nginx server with "Let's Encrypt" to create a proxy. Apache may do it, but I couldn't get it to work

Docker build of Azuracast.  This will give you an interface to create new streams and delete them quickly.

Install SSL to icecast with "Let's Encrypt". Icecast has a web directory to point the test to for Let's Encrypt. Shoutcast doesn't yet have this ability and probably won't in the free version if they are really planning a paid version

Some of these suggestions maybe extreme.  For reuse that would be the way to go. If you just need temporary and quick use PHP

odonel

  • New User

  • Offline
  • *
  • 48
Re: Getting there with a new html5 audio player
« Reply #7 on: June 04, 2020, 12:37:12 AM »
True, Azuracast is a great option with letsencrypt. I stopped using icecast because of chrome https probs and switched ti AzuraCast.

Nice looking site emma. Lots of queries though. I like what you do with the req. page

djken

  • New User

  • Offline
  • *
  • 13
Re: Getting there with a new html5 audio player
« Reply #8 on: June 04, 2020, 03:32:52 AM »
That's a good solution for individuals, although not really a complete solution for embedding in a site that you expect lots of people to visit who may not know, or wish to try, that solution.

The 'Chrome' issue due to it's change to not allow 'mixed content'.  This will likely follow in other browsers too.  So unless you can have your audio stream to be authenticated as secure (HTTPS) then it will not play within an HTTPS website. (I guess if you had an HTTP website, then it would work with an HTTP stream?

We have this issue with our school radio station.  The (Google) website is HTTPS, but our locally hosted Shoutcast Stream is not.  The stream will play if using an App such as TuneIn, but not within our website via Chrome where we previously used a TuneIn embedded player.

Our current work-around has only been to move away from stream being embedded in our site, and a direct link to the stream audio.  Not pretty, but has to do at this stage.
https://www.radiokps.nz has a link that goes to http://210.54.147.177:8000/;

Just had to say nice sound

Rob Ashcroft

  • Full Member

  • Offline
  • ***
  • 163
    • Radio KPS
Re: Getting there with a new html5 audio player
« Reply #9 on: August 11, 2020, 06:08:02 AM »
Just had to say nice sound

Thanks :-)
http://radiokps.nz

RFU

  • Hero Member

  • Online
  • *****
  • 699
    • Radio Free Ukraine
Re: Getting there with a new html5 audio player
« Reply #10 on: August 27, 2021, 08:30:07 AM »
Did you ever get this finished Emma? I'm looking for a new player
Гордий бути українцем, Ми - Радіо Вільної України.