Guide : How to create HTML5 mp3 media player with playlist.

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
alexmasss
 
 
Posts: 215
Joined: Mon Sep 28, 2015 4:25 pm

Guide : How to create HTML5 mp3 media player with playlist.

Post by alexmasss » Sun Jan 22, 2017 11:54 pm

Most of the old extensions use SWF files that require Adobe flash. This may work for desktops but not for modern Android or IOS devices that don’t support flash. In this example I will show how to embed a player that works correctly on desktop, tablet and smartphone layout.
Please visit https://widgetic.com/widgets/ and create an account. Upload your MP3 to google drive and render it public. Design your media player or audio play button (there are several audio widgets on the site) and embed the code to your page.
When you insert the code into html be sure to select use div. The trick is to use a layer, that means html object has to be dropped onto a layer. The layer itself has to stretch the content and to have relative size and position. And finally you have to insert 2 breakpoints, one for tablet and one for smartphone. I have prepared a DEMO just to show you that it works. Download and give it a try. I have made it in a hurry so I had no time to adjust the size of the layer and html object. In case you decide to use this method please play a bit with the size.
Download link
https://yadi.sk/d/FQwiMag-3ANgTJ

chuck9997
 
 
Posts: 17
Joined: Sat Dec 03, 2016 1:27 pm

Re: Guide : How to create HTML5 mp3 media player with playli

Post by chuck9997 » Mon Jan 23, 2017 1:59 am

Can you post a link to a page where you have this embedded. I'll go there on my phone. If it works.. you may have something.

alexmasss
 
 
Posts: 215
Joined: Mon Sep 28, 2015 4:25 pm

Re: Guide : How to create HTML5 mp3 media player with playli

Post by alexmasss » Mon Jan 23, 2017 2:55 pm

https://yadi.sk/d/FQwiMag-3ANgTJ
As I mentioned before you have to play with the size and position. It works both on 768 and 320 px. Good luck.

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests