Responsive Audio player

Hi all, I’ve just done a quick holding page for the aforementioned site and added the music samples by ‘drag n drop’ method.

All looks fine viewed on desktop or iPad but on a phone the audio players spill out of their holding boxes, so 2 questions please:

Is there any way of making these default audio players responsive?
Does anyone know of a responsive audio player that can have a playlist (I need more than one song on here) and I can add easily because I’m pretty useless! ?

Thanks in advance everyone.
Trev

http:://www.p2v.rocks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No thoughts on this one?

Trev

On 9 Feb 2015, at 09:57, Trevreav email@hidden wrote:

Hi all, I’ve just done a quick holding page for the aforementioned site and added the music samples by ‘drag n drop’ method.

All looks fine viewed on desktop or iPad but on a phone the audio players spill out of their holding boxes, so 2 questions please:

Is there any way of making these default audio players responsive?
Does anyone know of a responsive audio player that can have a playlist (I need more than one song on here) and I can add easily because I’m pretty useless! ?

Thanks in advance everyone.
Trev

http:://www.p2v.rocks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No one? Anyone?
Bump!

On 10 Feb 2015, at 15:03, Trevor Reaveley email@hidden wrote:

No thoughts on this one?

Trev

On 9 Feb 2015, at 09:57, Trevreav email@hidden wrote:

Hi all, I’ve just done a quick holding page for the aforementioned site and added the music samples by ‘drag n drop’ method.

All looks fine viewed on desktop or iPad but on a phone the audio players spill out of their holding boxes, so 2 questions please:

Is there any way of making these default audio players responsive?
Does anyone know of a responsive audio player that can have a playlist (I need more than one song on here) and I can add easily because I’m pretty useless! ?

Thanks in advance everyone.
Trev

http:://www.p2v.rocks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Point is, that I don’t understand your construction - or at least can’t encrypt it.

The “inner-life” of the player is full of borders, shadows, inner-shadows … which apparently causes Freeway to break this down into several single (absolute positioned) DIVs.

But don’t ask me why Freeway is doing so.

Fact is, that those item3-fractals are as responsive as a good ol’ table.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Thomas, and thanks for the reply.

If you mean the beige coloured boxes, these inner shadows were added just using Freeway’s built in tools, but I ‘get’ what you’re saying about each box being split into numerous small boxes because of them.

So you’re saying that the audio players themselves should be responsive? I’ll look into my construction methods over the next day or so when I get a moment, I never thought of FW’s built in shadows breaking things up.

Thanks
Trev

On 12 Feb 2015, at 12:32, Thomas Kimmich email@hidden wrote:

Point is, that I don’t understand your construction - or at least can’t encrypt it.

The “inner-life” of the player is full of borders, shadows, inner-shadows … which apparently causes Freeway to break this down into several single (absolute positioned) DIVs.

But don’t ask me why Freeway is doing so.

Fact is, that those item3-fractals are as responsive as a good ol’ table.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m pretty convinced that the player is responsive, it’s just caught in this static surrounding and therefor pushed to the right.

Honestly, I don’t use Freeway’s inbuilt features, prefer to wrap those styles on a snippets.css to make them universal and re-usable.

I still do not know (however I’m aware of it) what issue and setting Freeway causes to break a construction down to a table (or table-like).

Formerly this had been two reasons:

  1. Internet Explorer and other browsers unable to display CSS, CSS2 and CSS3. So if the compatibility has been set low (IE5 e.g.) FW needed a way to make those fancy styles available in this surrounding → Image-sliced tables.

  2. The CSS button switched off or any other reason for Freeway to ignore “layers”.

These days?

No answer on this. So not of much help unfortunately.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No answers, but definitely pointers in the right direction and food for thought.

Thanks again Thomas.

Trev

On 12 Feb 2015, at 14:17, Thomas Kimmich email@hidden wrote:

No answer on this. So not of much help unfortunately.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi all, I’ve now simplified the layout of http://www.p2v.rocks and still having problems with the audio players.

I inserted them by dragging and dropping onto the page, then copying and pasting into the correct place. Their size is set as a percentage of the holding box (66%) and all is fine on a desktop and tablet but on a phone they still spill out of their holding boxes.

Does this default player have a minimum size which is throwing things? If so, is there something I can add to the extended attributes to overcome this?

Thanks in advance
Trev

On 12 Feb 2015, at 14:21, Trevor Reaveley email@hidden wrote:

No answers, but definitely pointers in the right direction and food for thought.

Thanks again Thomas.

Trev

On 12 Feb 2015, at 14:17, Thomas Kimmich email@hidden wrote:

No answer on this. So not of much help unfortunately.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

From what I can see the actual media controls have the following attributes

::-webkit-media-controls { width: inherit; …

The parent item appears to be item10 (at least for the 1st one) which has a width of 100%

So limiting the width of item10 might be the way to go - at least on webkit?

But this is not an area I am familiar width.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s great, thanks Dave. On the mobile device, the holding box reduces nicely, just not the player itself, but when I get a moment I’ll follow your suggestion.

And yes, on the finished site I will be naming things properly, we just wanted to get something up there quickly to point to from a Facebook page.

Trev

On 17 Feb 2015, at 09:54, DeltaDave email@hidden wrote:

From what I can see the actual media controls have the following attributes

::-webkit-media-controls { width: inherit; …

The parent item appears to be item10 (at least for the 1st one) which has a width of 100%

So limiting the width of item10 might be the way to go - at least on webkit?

But this is not an area I am familiar width.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

just not the player itself

That is what I am referring to when you see ‘webkit-media-controls’ - these are default Browser settings in Safari etc.

May be different for IE, FF etc.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve followed various suggestions for the audio bit of the page (http://www.p2v.rocks) and there has been some progress - thanks Dave and Thomas.

The players now stay in their holding boxes on a Samsung phone a friend owns and desktop and pads, but still spill out of their holding boxes on an iPhone, so any more thoughts, or any pointers to decent responsive audio players that could incorporate a small playlist?

Thanks again in advance for any suggestions.
Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No more news on this? Not that it’s top of my priorities at the moment, just asking while I remember.

Trev

On 19 Feb 2015, at 08:14, Trevor Reaveley email@hidden wrote:

I’ve followed various suggestions for the audio bit of the page (http://www.p2v.rocks) and there has been some progress - thanks Dave and Thomas.

The players now stay in their holding boxes on a Samsung phone a friend owns and desktop and pads, but still spill out of their holding boxes on an iPhone, so any more thoughts, or any pointers to decent responsive audio players that could incorporate a small playlist?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi TrevReav.

I’m currently researching ways to play audio and video files within a responsive environment for a new project and I’m wondering how you went about this. It looks like you might be using backdraft and a jquery player/plugin/script? Can I get some details how you tackled this?

Thanks so much!

Doty


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Doty, sorry for the ate reply - my Mac has been mad most of this week and I’ve just got the substitute one up and running.

On the site www.P2V.rocks, I used a little player called Amazing Audio Player (www.amazingaudioplayer.com) and did some basic customisations t0 match the page. I think I bought the standard version at $69US.

It’s a good little bit of kit, and if I could customise, make playlists etc. then anyone can. And yes, this site was done using BackDraft - it now needs updating with lots more polished music ready to go in there!

Best of luck
Trev

On 28 Jun 2016, at 19:57, Doty email@hidden wrote:

Hi TrevReav.

I’m currently researching ways to play audio and video files within a responsive environment for a new project and I’m wondering how you went about this. It looks like you might be using backdraft and a jquery player/plugin/script? Can I get some details how you tackled this?

Thanks so much!

Doty


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options