怎么隐藏audio播放器的播放进度条，只保留播放按钮？

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jnshu_it/article/details/85334329

怎么隐藏audio播放器的播放进度条，只保留播放按钮？

截图

在页面最右边的button中嵌套了audio音频播放器，播放器默认的样式有一个播放进度条，导致页面宽度被撑开了，布局被破坏。

第一种：<button class="btn btn-block sing"> 
                     <audio  src="audio/财富自由.mp3" controls="controls">
                     </audio>
               </button>
第二种：<button class="btn btn-block sing">
                    <audio src="audio/财富自由.mp3" autoplay="autoplay">
                    </audio>
                </button>

如果去掉controls值，可以隐藏播放进度条，但是整个播放器也无法播放了。
把control更换成autoplay虽然解决了进度条的问题，但是又无法控制背景音乐的暂停功能了。

深圳分院|内门弟子] JS-黄麒二

可以隐藏默认样式，切个图，引入一个js文件，使用onclick事件点击图标触发播放或暂停

[外门弟子] JS-7

扫描二维码关注公众号，回复： 4694535 查看本文章

方法一

       1    添加音频控件     autoplay="autoplay

       2   设置宽高   只剩下  播放按钮

      3   定位到   你想要的地方

      4  设置成   完全透明       自己看   用  rgba  透明还是   opacity

      5   设置   自己想不说了   

方法二

      添加js