Viewing HTML 5 Music Player
HTML 5 Music Player
|
User: Guest 12 years ago
|
|
| I've only just started to look at this program and already love it. Well done to the developers for making this happen! I have to maintain several web sites with limited time to spare - all containing lots of music previews so I would really love to see an HTML 5 music player added to the widgets. The iWeb one is fine except I would rather it didn't pre load the audio but waited until play had been pressed. When you have a page full of previews, that can take way too long. I've had a look at Roddy's (extremely helpful) page but my script knowledge is far too limited to get several audio previews in one page all behaving how I would like them to :) | |
| Edit | |
|
User: Roddy 12 years ago
|
|
|
You can use the HTML5 audio tag... http://roddymckay.com/EasyWeb/test/html5-audio.html As a matter of interest I am not getting the player to working Safari 6 for desktop using preload="none". It seems to prevent the player from working at all. Anybody else? Works fine in the other browsers. Safari really sucks nowadays and I don't know why I bother with it! ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 12 years ago
|
|
|
You can see from the example in my previous post that there are five main problems with using the HTML5 audio tag. [1] The players are different in the various browsers and look pretty awful. [2] It's not possible to have one player stop when the next is selected. This was one of the most requested features from iWeb users. [3] Firefox requires the addition of an OGG file [4] The player won't work in some older browsers [5] No control over initial volume. John Dyer's mediaelement player overcomes all these problems. Getting this player to work in EasyWeb is not very difficult. The main problem is that the assets folder contains 22 files. Not all these are required but a few are essential and are interdependent. I have cut this down to the ones that are actually required for audio playback which requires 7 files to be added to the EW assets. Only two of them actually need to be referenced along with jQuery. The neat thing about this player is that, if you enter the paths to the files and the setup javascript in the site wide code boxes, you only need to insert this into an HTML Snippet anywhere - or everywhere - on your site... <audio id="player1" src="{!-ASSETSPATH-!}External%20Files/file-name.mp3" type="audio/mp3" controls="controls" preload="none"> ... and give each player an id number. If I were an EasyWeb developer, this would be my default player. The assets could be on the EW server and the widget would only need fields for file path, player ID and initial volume. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 12 years ago
|
|
|
Here's an example of mediaelement audio in EasyWeb... http://roddymckay.com/EasyWeb/test/mediaelement-audio.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: pumpkin 12 years ago
|
|
|
It'd be awesome, if EasyWeb would feature this player.
------------------------------- Darian new to web design ______________________ My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b> |
|
|
User: Roddy 12 years ago
|
|
|
It would also be an idea to have a choice of player skins like light/dark to suit the web page design.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Guest 12 years ago
|
|
| Thanks so much Roddy, extremely helpful info and examples! | |
| Edit | |
|
User: Yelena 12 years ago
|
|
|
Quote: John Dyer's mediaelement player overcomes all these problems. Getting this player to work in EasyWeb is not very difficult. The main problem is that the assets folder contains 22 files. Not all these are required but a few are essential and are interdependent. I have cut this down to the ones that are actually required for audio playback which requires 7 files to be added to the EW assets. Only two of them actually need to be referenced along with jQuery. How does a regular person know which files these are and what to reference and where to put all of these files?...:) ------------------------------- Yelena MacBook Pro OS X 10.10.3 IMac 21" OS X 10.10.3 |
|
|
User: Roddy 12 years ago
|
|
|
Quote: How does a regular person know which files these are and what to reference and where to put all of these files? You wait for someone to get around to telling you! I actually had to work on the mediaelement audio player a couple of weeks ago for a client who wanted it as a really lightweight version with the minimum of code. In doing so I completely cut the CSS to pieces and got rid of all the unnecessary files. I also tackled the problem of the default HTML5 player appearing briefly in slow loading sites. The player can be implemented as the default but I prefer the cut down version without the elapsed and run time and others seem to want just the Play/Pause button version with the addition of rounded corners. I would do a tutorial but I don't know which one to focus on unless someone (or two) tells me! ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Yelena 12 years ago
|
|
|
Well, I am just trying to place an audio player and be able to customize it a little : size, color,etc. But there is no way I can figure it out on my own.... I am using the HTML5 you posted for now and it works well but I have to kind of mask it with other things so it doesn't ruin my design. I would like something that can be customized but isn't so complicated...:) This is why I liked Flash - I know it is not the best solution.... Quote: As a matter of interest I am not getting the player to working Safari 6 for desktop using preload="none". It seems to prevent the player from working at all. Anybody else? It works fine for me...
------------------------------- Yelena MacBook Pro OS X 10.10.3 IMac 21" OS X 10.10.3 |
|
|
User: Roddy 12 years ago
|
|
|
Quote: and be able to customize it a little : size, color,etc The mediaelement player can be customized for length and features in the setup javascript - within reason but color is not so simple since CSS gradients are used. Having said that, I have sent people some overwrite CSS and they managed OK and you could make the background a single color. Although it looks simple, the mediaelement audio player has several sections to it - some of which can be excluded easily - and they are all to some extent interdependent. There are two main ingredients missing from the HTML5 audio player which the iWeb QT player never had either and these are the ability to set initial volume and to have one player stop when another is started. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Guest 12 years ago
|
|
|
Roddy, were you able to figure out the Safari 6 glitch of not playing if the code is set to "none" for the preload? I have my music playing in all the other browsers and would like it to work in Safari as well. Thank you |
|
| Edit | |
|
User: Roddy 12 years ago
|
|
|
No, it only seems to happen on Safari for desktop and, even then, some people claim it works OK. It works fine in the iOS version of Safari. This is one of the many reasons why I don't rely on Safari for testing websites. To ensure that it works, you need to delete - preload="none"- which I guess is OK if you only have one or two tracks per page. If you have more than this you should be using a playlist style player anyway. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Guest 12 years ago
|
|
|
I posted this in its own thread but thought I would give it a shot here.. Hello, I used the code for the medialement player suggested on the HTML5 topic thread. I've texted it in Safari and Firefox but both have an issue. In Safari, the audio files never appear to load completely ("loading" text does not go away). However, they do play, but only if you're clever enough to click on the play button besides the "loading" text. In Firefox, when I click on the play button, the player disappears completely. Very strange. Anyone else experiencing this? Thanks! Lilah |
|
| Edit | |
|
User: Roddy 12 years ago
|
|
|
I answered the question your topic... http://ragesw.net/easyweb-beta/viewtopic.php?f=6...t=1106...p=5896#p5896 ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |