Quantcast

anyway to style <audio> tag?

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

anyway to style <audio> tag?

Angela French
Hello,
I am experimenting with using the <audio> tag.  I see it looks very different across browsers.  Is there any way to consistently style it across browsers?  Everything I see from Google is years old.

Thanks,



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
[hidden email]<mailto:[hidden email]>
www.sbctc.edu<http://www.sbctc.edu/>

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: anyway to style <audio> tag?

Brian Kardell
On Mar 14, 2017 6:36 PM, "Angela French" <[hidden email]> wrote:

Hello,
I am experimenting with using the <audio> tag.  I see it looks very
different across browsers.  Is there any way to consistently style it
across browsers?  Everything I see from Google is years old.

Thanks,



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
[hidden email]<mailto:[hidden email]>
www.sbctc.edu<http://www.sbctc.edu/>



What exactly are you looking to style? The player controls?


______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: anyway to style <audio> tag?

Karl DeSaulniers
In reply to this post by Angela French
Hi Angela,
The audio tag does not get styled, you crate a skin and load the audio, or BGSOUND into your skin.
You can associate your skins play and stop, etc with the controls from the audio tag.
However, I don't believe you can directly style the audio tag itself.

I did this for one of my sites back in 2010 and ti worked great.

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Mar 14, 2017, at 5:36 PM, Angela French <[hidden email]> wrote:
>
> Hello,
> I am experimenting with using the <audio> tag.  I see it looks very different across browsers.  Is there any way to consistently style it across browsers?  Everything I see from Google is years old.
>
> Thanks,
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> [hidden email]<mailto:[hidden email]>
> www.sbctc.edu<http://www.sbctc.edu/>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: anyway to style <audio> tag?

Karl DeSaulniers
That is create, not crate. Sorry.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Mar 14, 2017, at 9:53 PM, Karl DeSaulniers <[hidden email]> wrote:
>
> Hi Angela,
> The audio tag does not get styled, you crate a skin and load the audio, or BGSOUND into your skin.
> You can associate your skins play and stop, etc with the controls from the audio tag.
> However, I don't believe you can directly style the audio tag itself.
>
> I did this for one of my sites back in 2010 and ti worked great.
>
> HTH,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
>> On Mar 14, 2017, at 5:36 PM, Angela French <[hidden email]> wrote:
>>
>> Hello,
>> I am experimenting with using the <audio> tag.  I see it looks very different across browsers.  Is there any way to consistently style it across browsers?  Everything I see from Google is years old.
>>
>> Thanks,
>>
>>
>>
>> Angela French
>> Internet/Intranet Specialist
>> Washington State Board for Community and Technical Colleges
>> 360-704-4316
>> [hidden email]<mailto:[hidden email]>
>> www.sbctc.edu<http://www.sbctc.edu/>
>>
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: anyway to style <audio> tag?

Mi B
In reply to this post by Angela French
I still use this http://www.mediaelementjs.com that covers audio and video and allows for styling.



> 14 mars 2017 kl. 23:36 skrev Angela French <[hidden email]>:
>
> Hello,
> I am experimenting with using the <audio> tag.  I see it looks very different across browsers.  Is there any way to consistently style it across browsers?  Everything I see from Google is years old.
>
> Thanks,
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> [hidden email]<mailto:[hidden email]>
> www.sbctc.edu<http://www.sbctc.edu/>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: anyway to style <audio> tag?

Dave Chiu
In reply to this post by Angela French
have you tried manipulating the ShadowDOM?

here's a quick example for webkit (chrome):
http://codepen.io/davechiu/pen/9132f47a5fb2af6c656185a8368f9600/

it will take some legwork for cross browser compatibility and your legacy
compatibility will be very limited.

On Tue, Mar 14, 2017 at 6:36 PM, Angela French <[hidden email]> wrote:

> Hello,
> I am experimenting with using the <audio> tag.  I see it looks very
> different across browsers.  Is there any way to consistently style it
> across browsers?  Everything I see from Google is years old.
>
> Thanks,
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> [hidden email]<mailto:[hidden email]>
> www.sbctc.edu<http://www.sbctc.edu/>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: anyway to style <audio> tag?

Angela French
In reply to this post by Brian Kardell
I would be happy just applying a background color as the latest version of Chrome renders the player seemingly not in a container.

From: Brian Kardell [mailto:[hidden email]]
Sent: Tuesday, March 14, 2017 7:49 PM
To: Angela French
Cc: CSS Discussion Group
Subject: Re: [css-d] anyway to style <audio> tag?



On Mar 14, 2017 6:36 PM, "Angela French" <[hidden email]<mailto:[hidden email]>> wrote:
Hello,
I am experimenting with using the <audio> tag.  I see it looks very different across browsers.  Is there any way to consistently style it across browsers?  Everything I see from Google is years old.

Thanks,



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316<tel:360-704-4316>
[hidden email]<mailto:[hidden email]><mailto:[hidden email]<mailto:[hidden email]>>
www.sbctc.edu<http://www.sbctc.edu><http://www.sbctc.edu/>



What exactly are you looking to style? The player controls?


______________________________________________________________________
css-discuss [[hidden email]<mailto:[hidden email]>]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org<http://evolt.org> -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: anyway to style <audio> tag?

Mi B

> 15 mars 2017 kl. 16:33 skrev Angela French <[hidden email]>:
>
> I would be happy just applying a background color as the latest version of Chrome renders the player seemingly not in a container.


What’s the code design reason for using only the audio element and not wrapping it?
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Loading...