Need some suggestions for replacing Flash player on website

RadioGeorge
RadioGeorge used Ask the Experts™
on
I just found this out:

A number of gaming, education, and video sites still use Flash, and Adobe says it remains committed to supporting the technology until 2020 alongside partners like Apple, Facebook, Google, Microsoft, and Mozilla. Microsoft says it plans to disable Flash by default in Edge and Internet Explorer in mid to late 2019, with a full removal from all supported versions of Windows by 2020. Google will continue phasing out Flash over the next few years, while Mozilla says Firefox users will be able to choose which websites are able to run Flash next month and allow Firefox Extended Support Release (ESR) users to keep using Flash until the end of 2020.

My site, www.radiogeorge.com, has used a modified Flash player for years. While the big change is a year away, I'd like to start the obviously necessary overhaul now. It looks like I'll need a new player that can play the mp3 files I use, and I would like it to work across multiple browsers as well as on cell phones if possible. (Note: for cell phone usage, I do not use an app; I encourage interested parties to simply go to the website, the design of which makes it easy to select and listen to your preferred "channel.") Also note that this option is not available at present on most phones.

Lots of work to be done. Experts, what are your suggestions?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2016

Commented:
html5 has has built in audio/video players for a long time. replace all the flash player components with html5 equivalents i.e
<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Open in new window

Pravin AsarPrincipal Systems Engineer
Top Expert 2005

Commented:
ZeropointNRGHedge Fund Manager

Commented:
I clicked your website link from my email and totally forgot about your question xD Go oldies! ;)
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

David FavorFractional CTO
Distinguished Expert 2018

Commented:
What David Johnson said, use <audio> tag for playing audios.
Dr. KlahnPrincipal Software Engineer

Commented:
If you are going to go the HTML5 route, be sure that you choose a format that is backward compatible with older browsers.  Not all browsers are the latest and greatest HTML5 compliant; many people are satisfied with their systems as they stand, and this will be the case for some years to come.
RadioGeorgeOwner/Programmer

Author

Commented:
Status check so far: the amount of questions raised by the comments has multiplied. Due to the need for tracking all songs played across all "channels" on the site, it looks like any update I do (which will almost certainly have to be freelanced out) will have to address the backwards compatibility issue as well as a lot of other fine points. I'll leave this question up for another day or so before I close it out, since it seems like there would very well be more responses to add to what's been said so far.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Likely solution for "Due to the need for tracking all songs played across all channels on the site" will be to...

1) Use PHP pseudo streaming.

2) Point to the PHP pseudo stream within the <audio> tag.

3) This will allow tracking to a timecode range within each audio played, in other words audios could be restarted from last play point when site is revisited.

4) This code would have to be written.

A recent EE question covered this topic with a fair bit of detail. I'll post the question, when I find the URL.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Hum... 547 results for pseudo streaming in an EE search + I don't see the question I was looking for.

Start with the search - site:github.com php 206 pseudo streaming - which will turn up many code snippets which can be used as a starting point.
Hi,

Do you plan to stream / host the music, I mean the music came from which plateform?

As another way would be to embed external player from Youtube or Vimeo or from other music web site provider for example.
RadioGeorgeOwner/Programmer

Author

Commented:
The music is 100% hosted by the site itself, utilizing  custom designed coding to prevent piracy of the music. All songs played are tracked and counted, as this is required by various music licensing agencies, so that factor also enters into this discussion. I'm sure.
Hi,

I would use HTML5 like @David proposed.
and if you really want to support old browser (I don't but you may want to )
You can detect the browser using JavaScript then display the flash if old browser
and for recent browser display the audio html5

You can use https://modernizr.com/
to detect HTML5 for specific feature like audio

simple code
CSS
.no-audio .box { color: red; }
.audio .box { color: green; }

Open in new window

JS
if (Modernizr.audio) {
  // supported
} else {
  // not-supported
}

Open in new window

RadioGeorgeOwner/Programmer

Author

Commented:
Almost there...a final few question for David Johnson and all others:

Assuming I have the existing HTML site re-worked into HTML5:

--regarding just the display part of things,will the site automatically be compatible with all existing browsers without any odd display discrepancies?

--are/will all browsers be compatible with the HTML5 players?

--what about performance on cell phones? Note that because of the nature and design of the site, I have opted not to go with an app

All comments welcome, and this should wrap it up.
Hi,

Always check on caniuse website to get browser compatibility
https://caniuse.com/#search=audio%20element
https://caniuse.com/#feat=audio

The answer to your questions is No it will not be compatible with all browser version.

For the mobile performance there should be similar to desktop.
The web server hardware and Internet connection can make a difference.

I proposed you a way if you want to support non compatible browser
https://www.experts-exchange.com/questions/29155049/Need-some-suggestions-for-replacing-Flash-player-on-website.html#a42924196


You may also check this website  https://html5test.com/
RadioGeorgeOwner/Programmer

Author

Commented:
Whew! I want to thank ALL those who took the time to respond. The "sliders" system still leaves eomething to desired, but I try to be fair in awarding what I'm sure is some type of points or credits.

As it turns out, I just heard today from the freelancer who did most of the work on he site, who informed me that the last update we did for the player was all Javascript based.

Guess that takes care of a big part of the problem.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start Today