【问题标题】:Is it possible to style html5 audio tag?是否可以设置 html5 音频标签的样式?
【发布时间】:2011-05-06 19:36:59
【问题描述】:

我还没有找到任何关于如何做到这一点的资源。像改变播放器颜色这样简单的东西会很好:)

【问题讨论】:

标签: html audio


【解决方案1】:

标签的外观取决于浏览器,但您可以隐藏它,构建自己的界面并使用 Javascript 控制播放。

【讨论】:

    【解决方案2】:

    是的!带有“controls”属性的 HTML5 音频标签使用浏览器的默认播放器。您可以根据自己的喜好自定义它,方法是不使用浏览器控件,而是滚动您自己的控件并通过 javascript 与音频 API 对话。

    幸运的是,其他人已经这样做了。我现在最喜欢的播放器是jPlayer,它的风格非常好,效果很好。看看吧。

    【讨论】:

    • 所以答案是“不,不可能,你必须使用外部播放器”?
    • @Fernando:确实有可能。这回答了“有可能吗?”的问题
    • 谢谢@dsschnau。我发表了我的评论,因为问题是关于样式化 html5 video 标签,所有答案或多或少都像 是的,有可能,使用其他标签
    • jplayer 如果您不想使用开箱即用的其中一种皮肤,则不容易自定义。我想要一个简单的玩家——小巧且易于剥皮。
    • 那么,这真的是“不”吗?滚动您自己的 UI 与固定现有标记不同。
    【解决方案3】:

    要仅更改播放器的颜色,只需在您的 css 文件中处理音频标签,例如在我的一个网站上,播放器变得不可见(白底白字),所以我添加了:

    audio {
        background-color: #95B9C7;
    }
    

    这将播放器更改为浅蓝色。

    【讨论】:

    • 这不会改变我的播放器的颜色,它只是在它后面加上一个背景颜色。知道为什么吗?
    • @Tom 因为此解决方案不适用于更改播放器的默认灰色背景 :-) 与我的结果相同。
    • 这在 Chrome 和 Firefox 上不起作用,它似乎将颜色置于原始颜色之上,因此您会得到混合颜色,如果您尝试使用浅色,您将看不到任何颜色改变。
    【解决方案4】:

    如果你想在 CSS 中设置浏览器标准音乐播放器的样式:

    audio {
        enter code here;
    }
    

    【讨论】:

    • 不完整的描述非常简单,我可以使用这种方式来设置所有元素音频的样式
    • 即使粗略检查一下这个答案也会发现它是错误的。
    【解决方案5】:

    肯也做对了。

    css 标签:

    audio {
    
    }
    

    会给你一些结果。似乎它不希望播放器的任何高度高于或低于 25px,但宽度可以缩短或延长到一定程度。

    这对我来说已经足够了;看这个例子(警告,音频自动播放):www.thenewyorkerdeliinc.com

    【讨论】:

    • 对我来说,一个大问题是 Internet Explorer。尽管宽度设置为 150 像素,但它看起来很糟糕,颜色不同,尺寸也比其他浏览器播放器大得多
    • 如果你需要让 IE9+ 播放器进入一个小空间,25px 的高度和 100px 的宽度对我来说很有效。我认为 25px 的高度是关键,但无论出于何种原因,更大的数字都不起作用。
    • 链接失效了
    【解决方案6】:
    <audio>
    
    audio::-webkit-media-controls-panel
    
    audio::-webkit-media-controls-mute-button
    
    audio::-webkit-media-controls-play-button
    
    audio::-webkit-media-controls-timeline-container
    
    audio::-webkit-media-controls-current-time-display
    
    audio::-webkit-media-controls-time-remaining-display
    
    audio::-webkit-media-controls-timeline
    
    audio::-webkit-media-controls-volume-slider-container
    
    audio::-webkit-media-controls-volume-slider
    
    audio::-webkit-media-controls-seek-back-button
    
    audio::-webkit-media-controls-seek-forward-button
    
    audio::-webkit-media-controls-fullscreen-button
    
    audio::-webkit-media-controls-rewind-button
    
    audio::-webkit-media-controls-return-to-realtime-button
    
    audio::-webkit-media-controls-toggle-closed-captions-button
    

    参考:https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

    【讨论】:

    • 表现不佳但很有用的 CSS 选择器!
    • 你能举例说明如何使用这些吗?只是示例代码?
    • 只有基于 webkit 的浏览器支持(例如不支持 Firefox、IE 等)
    • 非常好的黑客攻击,这是正确的答案,非常感谢!我改变了音频标签的风格,没有痛苦和额外的 JS 代码,ViVa Fabio
    • 似乎是从gist.github.com/afabbro/3759334复制/粘贴
    【解决方案7】:

    是的:您可以隐藏内置浏览器 UI(通过从 audio 中删除 controls 属性),而是构建您自己的界面并使用 Javascript (source) 控制播放:

    <audio id="player" src="vincent.mp3"></audio>
    <div> 
      <button onclick="document.getElementById('player').play()">Play</button> 
      <button onclick="document.getElementById('player').pause()">Pause</button> 
      <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
      <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
    </div>
    

    然后,您可以使用 CSS 为元素设置任何您希望的样式。

    MDNHTMLAudioElement API reference

    【讨论】:

    • 这个(.play)肯定不能在IOS上运行,因为它被阻止了(见stackoverflow.com/questions/31776548/…
    • @user1432181 您的回复似乎不正确。您链接到的问题是 iOS 阻止自动播放并要求播放由用户交互启动。此答案中提供的代码在单击事件之后运行。
    • 完整但简单的答案,实际上回答了问题并且不涉及第 3 方 bs(涉及依赖和责任),这也恰好让我一开始就没有看到这一点。把?我喜欢的地方。
    【解决方案8】:

    一些颜色调整

    audio {
        filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
        width: 200px;
        height: 25px;
    }
    

    【讨论】:

    • 这是一种快速而肮脏的方式来改变播放器的基本颜色,非常好用
    • 我掸掉了我的登录凭据以登录,对此表示赞同,然后说“谢谢”。
    【解决方案9】:

    是的,有可能,来自@Fábio Zangirolami 的回答

    audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                    background-color: red;
    }
    

    【讨论】:

      【解决方案10】:

      缺少最重要的 IMO 控件容器 ::-webkit-media-controls-enclosure

      &::-webkit-media-controls-enclosure {
          border-radius: 5px;
          background-color: green;
      }
      

      【讨论】:

        【解决方案11】:

        我对音频组件进行了一些自定义。这就是我所做的。

        audio {
        /*border-radius: 90px;*/
        width: 250px;
        height: 45px;
        margin-top: 5px;
        margin-bottom: 5px;
        }
        
        audio::-webkit-media-controls-mute-button {
        display: none !important;
        }
        
        audio::-webkit-media-controls-volume-slider {
        display: none !important;
        }
        
        audio::-webkit-media-controls-volume-control-container.closed {
        display: none !important;
        }
        audio::-webkit-media-controls-volume-control-container{
        display: none !important;
        }
        

        我发现这些自定义仅适用于 Edge 和 Chrome。不是火狐..

        【讨论】:

          【解决方案12】:

          您可以使用 HTMLMediaElement Api 创建您自己的audioplayer with html/css。这可能是唯一的选择。因为默认播放器无法设置样式。

          【讨论】:

            猜你喜欢
            • 2016-07-04
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多