CSS基础测试6

[zhangxinxu]

本期题目如下：

原图素材（只要关心浅色部分）：

请附上对应的HTML代码和CSS代码，注意缩进和代码高亮，可以使用下面语法：

```html
你的代码在这里
```

```css
你的代码在这里
```

**请提供在线的可访问的demo地址**（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。 本期小测答疑周六5月18日上午10:00开始，大约半小时，直播地址：https://live.bilibili.com/21193211 首位答题者会额外2积分，同时会被翻牌。 感谢您的参与！

[wingmeng]

写之前翻看了下 Chrome 原生 <audio> 的 shadow DOM，有所启发。 > 在线 DEMO <

<div class="audio-controls">
  <div class="audio-controls-inner">
    <button class="audio-controls-button" aria-label="play"></button>
    <span class="audio-controls-time" aria-label="current">0:05</span>
    <span class="audio-controls-time" aria-label="remaining">0:05</span>
    <input class="audio-controls-timeline" type="range" step="60" max="5000" value="5000">
    <button class="audio-controls-button" aria-label="volume">
      <span class="audio-controls-button-volume-icon"><i></i></span>
    </button>
    <button class="audio-controls-button" aria-label="menu"></button>
  </div>        
</div>

body { background: #d6d6d6; }

/********** 主容器 **********/
.audio-controls {   
  /* width: 400px; */
  text-align: left;
}

/********** 样式容器 **********/
.audio-controls-inner {
  font-size: 16px;      /* 控件尺寸 */
  color: #000;          /* 控件主题色 */
  background: #f1f3f4;  /* 控件背景色 */

  display: flex;
  align-items: center;
  min-width: 2.125em;
  height: 3.375em;
  padding: 0 .625em;
  overflow: hidden;
  border-radius: 2.125em;
}

/********** 组件按钮公用样式 **********/
.audio-controls-button {
  flex: 0 0 2em;
  height: 2em;
  padding: 0;
  overflow: hidden;
  font-size: 100%;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 2.25em;
  cursor: pointer;
  transition: background ease-in-out .2s;
}
.audio-controls-button:hover { background: rgba(0,0,0,.06); }
.audio-controls-button::before {
  display: inline-block;
  content: "";
}

/********** 播放按钮 **********/
.audio-controls-button[aria-label="play"]::before {
  transform: translate(30%, .16em);
  border: solid transparent;
  border-width: .55em .65em;
  border-left-color: currentColor;
}

/********** 暂停按钮 **********/
.audio-controls-button[aria-label="pause"]::before {
  width: .375em;
  height: 48%;
  transform: translateY(.16em);
  text-align: center;
  border: solid currentColor;
  border-width: 0 .25em;
}

/********** 声音按钮 **********/
.audio-controls-button[aria-label="volume"] {
  margin-left: 1em;
  margin-right: .25em;
}
.audio-controls-button[aria-label="volume"]::before { display: none; }

/* 声音按钮图标 */
.audio-controls-button-volume-icon {
  display: inline-block;
  padding: .3em .15em;
  margin-left: -.3em;
  transform: translate(-50%, .15em);
  border: .3em solid transparent;
  border-right-color: currentColor;
  box-shadow: inset 1em 0 0;
}
.audio-controls-button-volume-icon > i {
  position: relative;
  left: calc(.3125em * 2);
}
.audio-controls-button-volume-icon > i::before {
  content: "";
  position: absolute;
  width: .7em;
  height: 1.4em;
  transform: translateY(-50%);
  box-sizing: border-box;
  border: .16em solid;
  border-left: 0;
  border-radius: 0 .7em .7em 0;
}
.audio-controls-button-volume-icon > i::after {
  content: "";
  position: absolute;
  width: .3em;
  height: .6em;
  transform: translateY(-50%);
  background: currentColor;
  border-radius: 0 .3em .3em 0;
}

/********** 选项菜单 **********/
.audio-controls-button[aria-label="menu"]::before  {
  width: .3125em;
  height: .3125em;
  transform: translateY(-50%);
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 .5em 0, 0 -.5em 0;
}

/********** 播放时间文本 **********/
.audio-controls-time {
  font-size: .875em;
  line-height: 1;
  opacity: .85;
}
.audio-controls-time[aria-label="current"] {
  margin-left: .375em;
}
.audio-controls-time[aria-label="remaining"]::before {
  content: "/";
  margin: 0 .25em;
}

/********** 时间轴 **********/
.audio-controls-timeline {
  -webkit-appearance: none;
  flex: 1;
  height: .25em;
  margin-left: 1em;
  font-size: 100%;
  color: inherit;
  background: currentColor;
  border-radius: .25em;
  mix-blend-mode: darken;
}
.audio-controls-timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  border: .375em solid;
  border-radius: 50%;
  box-shadow: 50vw 0 0 50vw rgba(255,255,255,.5);
}

[Seasonley]

在线demo

<div class="audio-wrap">
        <a class="audio-play" href="javascript:" title="播放/暂停"></a>
        <span class="audio-now" title="当前时刻">0:05</span><span class="audio-timeAll" title="时长">0:05</span>
        <input class="audio-progressbar" type="range" title="时间进度">
        <a class="audio-volume" href="javascript:" title="音量"></a>
        <a class="audio-menu" href="javascript:" title="菜单"></a>
    </div>

.audio-wrap{
    height: 56px;
    display: inline-block;
    border-radius: 28px;
    background: var(--Secondary);
    --Primary:black;
    --Secondary:#f1f3f4;
    line-height: 56px;
    padding: 0 28px;
    word-spacing: 0.5em;
    white-space:nowrap;
}
/* audio-play */
.audio-play{
    display: inline-block;
    border: 7px solid var(--Primary);
    border-right: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    box-sizing: border-box;
    border-left-width: 11px;
}

.audio-now::after{
    content:' / ';
    word-spacing: 0;
}

/* audio-progressbar */
.audio-progressbar{
    -webkit-appearance: none;
    outline: 0;
    border-radius: var(--x1);
    cursor: ew-resize;
    height: 4px;
    background: var(--Primary);
    vertical-align: middle;
}

.audio-progressbar::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    border-radius: 50%;
    height: 12px;
}

.audio-progressbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 0;
    width: 0;
    border-radius: 50%;
    border: 6px solid var(--Primary);
}
/* audio-volume */
.audio-volume{
    display: inline-block;
}
.audio-volume::after{
    content:"";
    display: inline-block;
    width: 4px;
    height: 6px;
    background: var(--Primary);
    border: 5px solid var(--Secondary);
    border-right-color: var(--Primary);
    vertical-align: middle;
}
.audio-volume::before{
    content:"";
    display: inline-block;
    background: var(--Primary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    margin: 20px 0 0 7px;
    clip-path: inset(0% 0% 0% 50%);
    box-shadow: 0 0 0 2px var(--Primary) inset, 0 0 0 5px #f1f1f1 inset;
}
/* audio-menu */
.audio-menu{
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--Primary);
    vertical-align: middle;
    margin-left: 21px;
}
.audio-menu::before,.audio-menu::after{
    content: "";
    display: inline-block;
    width:4px;
    height: 4px;
    background: var(--Primary);
    position: absolute;
}
.audio-menu::before{
    margin-top:-6px;
}
.audio-menu::after{
    margin-top:6px;
}

[liyongleihf2006]

jsbin

<div class="audio">
  <div class="audio-inner">
    <i class="audio__start"></i>
    <i class="audio__progress">
      <i>0.05</i>
      <i>/</i>
      <i>0.05</i>
    </i>
    <i class="audio__volume-size">
      <i class="audio__volume-size__line"></i>
      <i class="audio__volume-size__handler"></i>
    </i>
    <i class="audio__horn">
      <i class="audio__horn-start"></i>
      <i class="audio__horn-middle"></i>
      <i class="audio__horn-end"></i>
    </i>
    <i class="audio__more">
      <i class="audio__more__circle"></i>
    </i>
  </div>
</div>

.audio {
  --iconSize: 5vw;
  --iconBg: #000;
  padding:calc( .5 * var(--iconSize));
  background: #d6d6d6;
}

.audio-inner {
  height: calc( 2 * var(--iconSize));
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: var(--iconSize);
  background:#f1f3f4;
}

.audio__start {
  border-left: calc(.8 * var(--iconSize)) solid var(--iconBg);
  border-top: calc(.5 * var(--iconSize)) solid transparent;
  border-bottom: calc(.5 * var(--iconSize)) solid transparent;
}

.audio__progress {
  font-size: calc(.5 * var(--iconSize));
  color:#797a7b;
}

.audio__volume-size {
  position: relative;
  display: flex;
  align-items: center;
}

.audio__volume-size__line {
  height: calc(.2 * var(--iconSize));
  width: calc(5 * var(--iconSize));
  background: var(--iconBg);
}

.audio__volume-size__handler {
  height: calc(.5 * var(--iconSize));
  width: calc(.5 * var(--iconSize));
  position: absolute;
  right: 0;
  background: var(--iconBg);
  border-radius: 50%;
}

.audio__horn {
  flex-grow: 0;
  display: flex;
  align-items: center;
}

.audio__horn-start {
  width: calc(.5 * var(--iconSize));
  height: calc(.5 * var(--iconSize));
  margin-right: calc(-.5 * var(--iconSize));
  background: var(--iconBg);
}

.audio__horn-middle {
  border-style: solid;
  border-color: transparent var(--iconBg) transparent transparent;
  border-top-width: calc(.5 * var(--iconSize));
  border-right-width: calc(.5 * var(--iconSize));
  border-bottom-width: calc(.5 * var(--iconSize));
}

.audio__horn-end {
  box-sizing: border-box;
  width: var(--iconSize);
  height: var(--iconSize);
  margin-left: calc(-.4 * var(--iconSize));
  border: calc(.1 * var(--iconSize)) solid var(--iconBg);
  padding: calc(.15 * var(--iconSize));
  background-color: var(--iconBg);
  background-clip: content-box;
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.audio__more {
  box-sizing: border-box;
  height: var(--iconSize);
  width: calc(.3 * var(--iconSize));
  border-top: var(--iconBg) calc(.2 * var(--iconSize)) dotted;
  border-bottom: var(--iconBg) calc(.2 * var(--iconSize)) dotted;
  display: flex;
  align-items: center;
}

.audio__more__circle {
  height: calc(.2 * var(--iconSize));
  width: calc(.2 * var(--iconSize));
  background-color: var(--iconBg);
  border-radius: 50%;
}

[XboxYan]

demo

<div class="audio" style="color:red">
    <button class="audio-button">
        <i class="icon" name="play"></i>
    </button>
    <span class="audio-current-time">0:01</span>
    <span class="audio-duration-time">/ 0:05</span>
    <div class="audio-controls" style="--percent:20">
        <button class="audio-controls-track"></button>
        <button class="audio-controls-thumb" data-title></button>
    </div>
    <button class="audio-button">
        <i class="icon" name="volumn"></i>
    </button>
    <button class="audio-button">
        <i class="icon" name="menu"></i>
    </button>
</div>

.audio{
    box-sizing: border-box;
    display: flex;
    padding: 0 10px;
    border-radius: 100px;
    align-items: center;
    min-width: 320px;
    min-height: 54px;
    background: rgb(241, 243, 244);
    color: #000000;
    font-size: 16px;
}
.audio-button{
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background: none;
    outline: 0;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
}
.audio-button:active{
    background: rgba(0,0,0,.1)
}
.icon{
    display: inline-block;
    font-size: 1.2em;
}
.audio-current-time,.audio-duration-time{
    margin-left: 5px;
    opacity: 0.87;
}
.audio-controls {
    position: relative;
    flex: 1;
    padding: 4px 0;
    margin: 15px;
    --percent: 0;
    outline:0;
    color: inherit;
}

.audio-controls-track {
    display: block;
    width: 100%;
    height: 4px;
    background-color: rgb(196, 196, 196);
    border: 0;
    padding: 0;
    outline:0;
    color: inherit;
}

.audio-controls-track::before {
    content: '';
    display: block;
    height: 100%;
    opacity: .87;
    background-color: currentColor;
    width: calc(1% * var(--percent));
}

.audio-controls-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0;
    padding: 0;
    color: inherit;
    background: currentColor;
    opacity: .87;
    border-radius: 50%;
    left: calc(1% * var(--percent));
    top: 0;
    margin: auto -6px;
    outline:0;
    transition:all .15s .15s, left 0s 0s;
    cursor: pointer;
}
.icon[name="play"]{
    width: 0;
    height: 0;
    margin-left: .2em;
    border-width: .4375em 0 .4375em .6875em;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
}
.icon[name="volumn"]{
    position: relative;
    width: 1.125em;
    height: 1.125em;
}
.icon[name="volumn"]::before{
    content: '';
    width: 0.25em;
    height: 0.375em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-width: 0.3125em 0.3125em 0.3125em 0;
    border-style: solid;
    background: currentColor;
    background-clip: content-box;
    border-color: transparent currentColor transparent transparent;
}
.icon[name="volumn"]::after{
    content: '';
    width: 0.625em;
    height: 0.625em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 0.125em solid;
    padding: 0.125em;
    background: currentColor;
    background-clip: content-box;
    clip: rect(0,1.125em,1.125em,0.625em)
}
.icon[name="menu"]{
    position: relative;
    width: 0.25em;
    height: 0.25em;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 -.4em 0 0 currentColor,0 .4em 0 0 currentColor
}

当然，没有什么是css渐变生成不了的，试着实现了一下

/**css gradient 生成**/
.icon2[name="volume"]{
    background-image: linear-gradient(to right,currentColor,currentColor),linear-gradient(135deg,transparent 50%,currentColor 0),linear-gradient(45deg,transparent 50%,currentColor 0),radial-gradient( circle at -0.125em center,currentColor 0.3125em, transparent,0,transparent,0.4375em,currentColor 0,currentColor 0.5625em,transparent 0);
    background-size:0.5625em 0.375em, 0.3125em 0.3125em, 0.3125em 0.3125em, 0.4375em 1.25em;
    background-repeat: no-repeat;
    background-position: 0.0625em center, 0.3125em 0.125em,left 0.3125em bottom 0.125em, right 0.0625em center;
}

右侧为渐变生成

很明显，实现成本高，效果也不理想（有锯齿）

[livetune]

demo

<div class="player">
    <div class="play-button"></div>
    <div class="time">00:00 / 00:05</div>
    <div class="process">
        <div class="process-button"></div>
    </div>
    <div class="voice">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="more"><i></i><i></i><i></i></div>
</div>

body {
    background: #d6d6d6;
}

.player {
    width: 100%;
    min-width: 290px;
    height: 50px;
    display: flex;
    padding: 0 20px;
    background: #f1f3f4;
    border-radius: 9999px;
    align-items: center;
    box-sizing: border-box;
}

.play-button {
    border-left: 14px solid #000;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.time {
    color: #8e8f90;
    margin: 0 12px;
}

.process {
    position: relative;
    background: #000;
    height: 5px;
    flex: 1;
}

.process-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 12px;
    background: #0c0c0c;
    border-radius: 50%;
}

.voice {
    margin-left: 30px;
    display: flex;
    align-items: center;
}

.voice .left {
    position: relative;
    width: 12px;
    height: 12px;
    background: #0c0c0c;
}

.voice .left::before {
    position: absolute;
    content: ' ';
    left: 0;
    top: 50%;
    transform: translateY( -50%);
    border-top: 12px solid transparent;
    border-right: 16px solid #000;
    border-bottom: 12px solid transparent;
}

.voice .right {
    position: relative;
    width: 12px;
    height: 24px;
    margin-left: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.voice .right::after {
    content: ' ';
    position: absolute;
    left: -100%;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    background: #000;
    z-index: 10;
}

.voice .right::before {
    position: absolute;
    content: ' ';
    width: 15px;
    height: 15px;
    top: 50%;
    left: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 20;
}

.more {
    margin-left: 20px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.more i{
    background: #000000;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

[NeilChen4698]

Demo: https://codepen.io/crazyboy/pen/WBpeyB

<div class="audio">
    <div class="audio-start"></div>
    <div class="audio-time">0:05&#160;/&#160;0:05</div>
    <div class="audio-slider">
        <div class="audio-slider-track"></div>
        <div class="audio-slider-thumb"></div>
    </div>
    <div class="audio-volume">
        <div class="audio-volume-left"></div>
        <div class="audio-volume-right"></div>
    </div>
    <div class="audio-more">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

.audio {
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 300px;
    height: 54px;
    border-radius: 27px;
    background-color: #f1f3f4;
    padding: 0 10px;
}
.audio-start {
    cursor: pointer;
    border-top: 6px solid transparent;
    border-left: 10.392px solid;
    border-bottom: 6px solid transparent;
}
.audio-time {
    font-size: 14px;
    color: #202021;
}
.audio-slider {
    position: relative;
    width: 120px;
}
.audio-slider-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #000000;
}
.audio-slider-thumb {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000000;
}
.audio-volume {
    cursor: pointer;
}
.audio-volume-left {
    display: inline-block;
    float: left;
    border-top: 5px solid transparent;
    border-right: 5px solid;
    border-bottom: 5px solid transparent;
}
.audio-volume-left::before {
    content: '';
    display: block;
    width: 4px;
    height: 6px;
    background-color: #000000;
}
.audio-volume-right {
    display: inline-block;
    float: left;
    width: 5px;
    height: 10px;
    margin-top: -1px;
    border: 2px solid;
    padding: 2px 2px 2px 0;
    border-left: 0;
    background-clip: content-box;
    background-color: #000000;
    border-radius: 0 10px 10px 0;
}
.audio-volume-right::after {
    content: '';
    margin-top: -4px;
    display: block;
    height: 18px;
    width: 2px;
    background-color: #f1f3f4;
}
.audio-more {
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
}
.audio-more>div {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #000000;
}

[guqianfeng]

在线demo

    <div class="player">
        <div class="box">
            <div class="play-btn"></div>
            <div class="time">
                <span>0:05 / 0:05</span>
            </div>
            <div class="slider">
                <button class="slider-track"></button>
                <button class="slider-thumb"></button>
            </div>
            <div class="sound">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="menu">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

        html {
            font-size: 16px;
        }

        @media screen and (min-width: 375px) {
            html {
                /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
                font-size: calc(100% + 2 * (100vw - 375px) / 39);
                font-size: calc(16px + 2 * (100vw - 375px) / 39);
            }
        }
        @media screen and (min-width: 414px) {
            html {
                /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
                font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
                font-size: calc(18px + 4 * (100vw - 414px) / 586);
            }
        }
        @media screen and (min-width: 600px) {
            html {
                /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
                font-size: calc(125% + 4 * (100vw - 600px) / 400);
                font-size: calc(20px + 4 * (100vw - 600px) / 400);
            }
        }
        @media screen and (min-width: 1000px) {
            html {
                /* 1000px往后是每100像素0.5px增加 */
                font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
                font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
            }
        }
        .player{
            position: relative;
            width: 80%;
            height: 2rem;
            margin: auto;
            background-color: #d1d1d1;
        }
        .box{
            display: flex;
            position: absolute;
            width: 95%;
            height: 70%;
            background-color: #eff1f2;
            border-radius: .5rem;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            align-items: center;
            justify-content: space-around;
        }
        .box > div{
            cursor: pointer;
        }
        .play-btn{
            width: 0;
            height: 0;
            border-left: .8rem solid black;
            border-top: .4rem solid transparent;
            border-bottom: .4rem solid transparent;
        }
        .sound{
            position: relative;
        }
        .sound > div{
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .sound > div:nth-child(1){
            width: .4rem;
            height: .4rem;
            background-color: #000;
        }
        .sound > div:nth-child(2){
            width: 0;
            height: 0;
            border-right: .8rem solid black;
            border-top: .4rem solid transparent;
            border-bottom: .4rem solid transparent;
        }
        .sound > div:nth-child(3){
            width: .2rem;
            height: .2rem;
            left: .75rem;
            border: .1rem solid black;
            border-left: none;
            border-radius: 50%;
        }
        .sound > div:nth-child(4){
            width: .4rem;
            height: .4rem;
            left: .75rem;
            border: .1rem solid black;
            border-left: none;
            border-radius: 50%;
            padding: .06rem;
        }
        .menu span{
            display: block;
            width: .15rem;
            height: .15rem;
            border-radius: 50%;
            background-color: #000;
            margin: .1rem 0;
        }
        .slider {
            width: 30%;
            padding: .2rem 0;
            position: relative;
            margin: 1rem 0;
            --percent: 100;
        }

        .slider-track {
            display: block;
            width: 100%;
            height: .3rem;
            background-color: lightgray;
            border: 0;
            padding: 0;
        }

        .slider-track::before {
            content: '';
            display: block;
            height: 100%;
            background-color: black;
            width: calc(1% * var(--percent));
        }

        .slider-thumb {
            position: absolute;
            width: .7rem;
            height: .7rem;
            border: 0;
            padding: 0;
            background: #000;
            box-shadow: 0 0 0 .1rem black;
            border-radius: 50%;
            left: calc(1% * var(--percent));
            top: 0;
            margin: auto -0.1rem;
        }

[liulyu]

demo

<div class="audio">
            <div class="audio-play"></div>
            <span class="audio-time">0:00/4:42</span>
            <div class="audio-progress"></div>
            <div class="audio-volume"></div>
            <div class="audio-more">
                <span class="audio-more-content"></span>
            </div>
        </div>

.audio{
            background-color: #F1F3F4;
            height: 54px;
            width:300px;
            margin:0 auto;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .audio-time{
            color:#666
        }
        .audio-play{
            display: inline-block;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 16px solid black;
            width: 0;
            height: 0;
        }

        .audio-progress{
            width: 30%;
            height: 5px;
            background: grey;
            position: relative;
            border-radius: 2px
        }
        .audio-progress::before{
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top:0;
            left:-4px;
            transform: translateY(-30%)
        }
        .audio-volume{
            display: inline-block;
            border:6px solid black;
            border-top-color: #F1F3F4;
            border-left-color: #F1F3F4;
            border-bottom-color: #F1F3F4;
            width: 6px;
            height: 6px;
            background: black;
            position: relative;
        }
        .audio-volume::before{
            content: "";
            display: inline-block;
            position: absolute;
            top:-8px;
            left:14px;
            width: 3px;
            height: 10px;
            padding:3px 3px 3px 0;
            border:3px solid black;
            background-color: black;
            background-clip: content-box;
            border-left: 0;
            border-radius: 0 12px  12px 0
        }    

        .audio-more{
            width: 5px;
            height: 10px;
            border-top: 5px solid black;
            border-bottom: 5px solid black;
            display: flex;
            align-items: center
        }
        .audio-more-content{
            width: 5px;
            height: 5px;
            background-color: black;
        }

[imlijq]

demo

<div class="audio-player">
  <div aria-label="音频正在缓冲" style="display:none;"></div>

  <div class="operate-box">
    <div class="player-button play" aria-label="播放"></div>

    <div class="player-time current-time" aria-label="已播放时间：1:00">1:00</div>
    <div class="player-time all-time" aria-label="总时间：2:00">2:00</div>

    <div class="player-timeline" aria-label="播放进度：50%">
      <span class="loading" style="--loadingpercent: 100;"></span>
      <div class="range" style="--timepercent: 50;">
        <span class="btn"></span>
      </div>
    </div>

    <div class="player-button mute" aria-label="静音">
      <span class="left"></span>
      <span class="right"></span>
    </div>

    <div class="player-button more">
      <i></i>
      <i></i>
      <i></i>
    </div>

  </div>
</div>

.operate-box {
  height: 54px;
  line-height: 54px;
  max-width: 50%;
  min-width: 250px;
  margin: 0 auto;
  background-color: #F1F3F4;
  border-radius: 27px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.player-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-button:hover {
  background-color: #DADBDC;
}

.player-button.play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #000;
  margin: auto;
}

.player-button.mute span {
  display: block;
}

.player-button.mute .left {
  width: 4px;
  height: 6px;
  background-color: #000;
  background-clip: content-box;
  border-style: solid;
  border-width: 5px 5px 5px 0;
  border-color: transparent #000 transparent #000;
}

.player-button.mute .right {
  margin-left: 2px;
  width: 18px;
  width: 7px;
  height: 18px;
  position: relative;
  overflow: hidden;
}

.player-button.mute .right::before, .player-button.mute .right::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  transform: translate(0, -50%);
  border-radius: 50%;
}

.player-button.mute .right::before {
  right: 0;
  width: 17px;
  height: 17px;
  border: 2px solid #000;
}

.player-button.mute .right::after {
  right: 4px;
  width: 8px;
  height: 8px;
  background-color: #000;
}

.player-button.more {
  flex-direction: column;
}

.player-button.more i {
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
}

.player-button.more i + i {
  margin-top: 2px;
}

.player-time {
  font-size: 14px;
}

.player-time.current-time {
  margin-left: 5px;
}

.player-time.all-time::before {
  content: "/";
  padding: 0 3px;
}

.player-timeline {
  flex: 1;
  height: 4px;
  margin: 0 23px 0 16px;
  background-color: #C1C2C3;
  border-radius: 2px;
  position: relative;
}

.player-timeline .loading {
  position: absolute;
  height: 100%;
  width: calc(1% * var(--loadingpercent));
  background-color: #595959;
  border-radius: 2px;
  left: 0;
  top: 0;
}

.player-timeline .range {
  height: 100%;
  width: calc((100% - 12px) * var(--timepercent) / 100);
  background-color: #191919;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
}

.player-timeline .range .btn {
  display: block;
  width: 12px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
}

[ximuli]

在线 demo

<div class="wrapper">
  <div class="audio">
    <div class="audio-play"></div>
    <div class="audio-time">
      <span>0:05</span> / <span>0:05</span>
    </div>
    <div class="audio-control">
      <input type="range">
    </div>
    <div class="audio-sound">
      <span class="audio-sound-one"></span>
      <span class="audio-sound-two"></span>
    </div>
    <div class="audio-setting"></div>
  </div>
</div>

.wrapper {
  padding: 9px 5px;
  background-color: #d6d6d6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .audio {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 0;
  min-width: 282px;
  min-height: 54px;
  background-color: #f1f3f4;
  border-radius: 45px;
  display: flex;
  align-items: center;
}
.wrapper .audio .audio-play {
  width: 0px;
  height: 0;
  display: inline-block;
  margin-left: 22px;
  border-left: 10px solid #000;
  border-right: 10px solid transparent;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
}
.wrapper .audio .audio-time {
  font-size: 14px;
  color: #333;
  margin-right: 16px;
  flex-shrink: 1;
  white-space: nowrap;
}
.wrapper .audio .audio-control {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.wrapper .audio .audio-control > input {
  -webkit-appearance: none;
  width: 100%;
  min-width: 60px;
  background-color: #000;
  height: 4px;
  border-radius: 5px;
}
.wrapper .audio .audio-control > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 50%;
}
.wrapper .audio .audio-sound {
  display: flex;
  align-items: center;
  min-width: 18px;
  min-height: 18px;
  margin-right: 50px;
  margin-left: 20px;
}
.wrapper .audio .audio-sound .audio-sound-one {
  width: 0px;
  height: 0;
  display: inline-block;
  position: relative;
  border-left: 6px solid transparent;
  border-right: 6px solid #000;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
}
.wrapper .audio .audio-sound .audio-sound-one::after {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #000;
  content: '';
  transform: translate(-50%, -50%);
}
.wrapper .audio .audio-sound .audio-sound-two {
  width: 0px;
  height: 18px;
  display: inline-block;
  position: relative;
  right: 15%;
  border-left: 7px solid transparent;
  border-right: 7px solid #000;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  border-radius: 50%;
}
.wrapper .audio .audio-sound .audio-sound-two::before, .wrapper .audio .audio-sound .audio-sound-two::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 0px;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 50%;
}
.wrapper .audio .audio-sound .audio-sound-two::before {
  height: 12px;
  border-left: 5px solid transparent;
  border-right: 5px solid white;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  z-index: 2;
}
.wrapper .audio .audio-sound .audio-sound-two::after {
  height: 8px;
  border-left: 3px solid transparent;
  border-right: 3px solid #000;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  z-index: 3;
}
.wrapper .audio .audio-setting {
  display: inline-block;
  width: 4px;
  height: 4px;
  position: absolute;
  border-radius: 1px;
  right: 24px;
  background-color: #000;
}
.wrapper .audio .audio-setting::before, .wrapper .audio .audio-setting::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 1px;
}
.wrapper .audio .audio-setting::before {
  bottom: 100%;
  margin-bottom: 2px;
}
.wrapper .audio .audio-setting::after {
  top: 100%;
  margin-top: 2px;
}

[Despair-lj]

demo

<div class="audio-container">
  <a
    href="javascript:"
    class="audio-play fl"
    title="播放"
    aria-label="播放"
    tabindex="1"
  >
    <i class="icon-play"></i>
  </a>
  <span class="audio-time fl" aria-label="总时间">
    <em aria-label="已播放时间">0:00</em> / 0:08
  </span>
  <a href="javascript:" class="audio-menu fr" aria-label="菜单" tabindex="5">
    <i class="icon-menu"></i>
  </a>
  <div class="audio-volumn-container fr">
    <a
      href="javascript:"
      class="audio-volumn"
      tabindex="4"
      aria-label="音量调节"
    >
      <i class="icon-volumn"></i>
    </a>
    <div
      class="audio-controls-slider"
      data-percent="0"
      tabindex="3"
      aria-label="音量调节"
    >
      <div class="audio-controls-slider-container">
        <button class="audio-controls-slider-track" tabindex="-1"></button>
        <button class="audio-controls-slider-thumb" tabindex="-1"></button>
      </div>
    </div>
    <div class="audio-background"></div>
  </div>

  <div
    class="audio-controls-slider"
    data-percent="0"
    tabindex="2"
    aria-label="进度条"
  >
    <div class="audio-controls-slider-container">
      <button class="audio-controls-slider-track" tabindex="-1"></button>
      <button class="audio-controls-slider-thumb" tabindex="-1"></button>
    </div>
  </div>
</div>

body {
  margin: 0;
}

.audio-container {
  position: relative;
  height: 54px;
  line-height: 54px;
  padding: 0px 10px;
  border-radius: 100px;
  font-size: 0;
  background-color: #f1f3f4;
  color: #000;
}

.fl {
  float: left;
}
.fr {
  float: right;
}

.audio-play {
  width: 30px;
  height: 54px;
}
.icon-play,
.icon-menu {
  display: block;
  height: 30px;
  margin: 10px 0 0;
  border-radius: 50%;
}
.icon-play::before {
  content: '';
  position: absolute;
  margin: 9px 0 0 10px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 12px solid #000;
  border-bottom: 7px solid transparent;
}

.audio-time {
  display: inline-block;
  font-size: 14px;
  margin: 0 5px;
}
.audio-time em {
  font-style: normal;
}

.audio-controls-slider {
  display: block;
  position: relative;
  width: auto;
  height: 54px;
  vertical-align: top;
  overflow: hidden;
  --percent: 20;
  transition: width 0.3s;
}
.audio-controls-slider-container {
  position: relative;
  margin: 22px 0;
  padding: 5px 0;
  direction: ltr;
}
.audio-controls-slider-track {
  display: block;
  width: 100%;
  height: 4px;
  background-color: rgb(102, 103, 102);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.audio-controls-slider-track::before {
  content: '';
  display: block;
  height: 100%;
  background-color: #000;
  width: calc(1% * var(--percent));
}
.audio-controls-slider-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0;
  padding: 0;
  background: #000;
  border-radius: 50%;
  left: calc(1% * var(--percent));
  top: 0;
  margin: auto -5px;
  cursor: pointer;
}

.audio-volumn-container {
  position: relative;
  height: 54px;
  margin-left: 10px;
  border-radius: 30px;
  z-index: 0;
  direction: rtl;
}
.audio-background {
  position: absolute;
  top: 11px;
  right: 2px;
  width: 124px;
  height: 32px;
  border-radius: 16px;
  z-index: -1;
}
.audio-volumn-container .audio-controls-slider {
  width: 0px;
  display: inline-block;
  opacity: 0;
}
.audio-volumn {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 54px;
  overflow: hidden;
}
.icon-volumn {
  position: absolute;
  top: 22px;
  left: 6px;
  width: 3px;
  height: 5px;
  background-color: #000;
  background-clip: content-box;
  border-top: 4px solid transparent;
  border-right: 4px solid #000;
  border-bottom: 4px solid transparent;
}
.icon-volumn::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 9px;
  width: 3px;
  height: 6px;
  border-radius: 0px 3px 3px 0;
  background-color: #000;
}
.icon-volumn::after {
  content: '';
  position: absolute;
  top: -9px;
  left: -10px;
  width: 22px;
  height: 19px;
  border-radius: 50%;
  border-top: solid 2px transparent;
  border-right: solid 2px #333;
  border-bottom: solid 2px transparent;
  border-left: solid 2px transparent;
}

.audio-menu {
  width: 30px;
  height: 54px;
}
.icon-menu {
  position: relative;
  background-color: #f1f3f4;
  margin-top: 14px;
}
.icon-menu::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 8px 0, 0 -8px 0;
  color: #000;
  background-color: #000;
}

.audio-play:hover .icon-play,
.audio-play:focus .icon-play,
.audio-menu:hover .icon-menu,
.audio-menu:focus .icon-menu,
.audio-volumn-container:hover .audio-background,
.audio-volumn-container .audio-controls-slider:focus ~ .audio-background,
.audio-volumn:focus ~ .audio-background {
  background-color: #e1e1e1;
}

.audio-volumn-container:hover .audio-controls-slider,
.audio-volumn-container .audio-controls-slider:focus,
.audio-volumn:focus ~ .audio-controls-slider {
  opacity: 1;
  width: 90px;
}

[asyncguo]

demo

<div class="audio-box">
  <button class="audio-play">
     <i class="icon-audio-play"></i>
  </button>
  <span class="audio-time">0.05 / 0.05</span>
  <div class="audio-play-length"></div>
  <div class="audio-volume">
    <i class="audio-volume-left"></i>
    <i class="audio-volume-right"></i>
  </div>
  <i class="audio-more"></i>
</div>

.audio-box{
  display: flex;
  align-items: center;
  width: 600px;
  min-height: 60px;
  background-color: #f1f3f4;
  border-radius: 30px;
}
.audio-play{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  border: none;
  outline: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  background: inherit;
}
.audio-play:active{
  background: #e5e7e8;
}
.icon-audio-play{
  margin-left: 3px;
  border-left: 12px solid;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.audio-time{
  margin-left: 5px;
  display: inline-block;
  font-size: 14px;
  color: #202021;
}
.audio-play-length{
  position: relative;
  flex: 1;
  margin: 0 10px;
  height: 5px;
  background-color: #000;
  border-radius: 5px;
  --percent: 20;
}
.audio-play-length::before{
  content: '';
  position: absolute;
  top: 50%;
  left: calc(1% * var(--percent));
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
  z-index: 2;
}
.audio-play-length::after{
  content: '';
  position: absolute;
  left: calc(1% *var(--percent));
  width: calc(100% - 1% * var(--percent));
  height: 5px;
  background-color: #595959;
  border-radius: 0 5px 5px 0;
}
.audio-volume{
  display: flex;
  align-items: center;
  height: 30px;
}
.audio-volume-left{
  position: relative;
  width: 10px;
  height: 10px;
  background-color: #000;
}
.audio-volume-left::after{
  content: '';
  position: absolute;
  top: -5px;
  right: 8px;
  transform: translate(100%);
  border-right: 12px solid;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.audio-volume-right{
  position: relative;
  width: 9px;
  height: 30px;
  overflow: hidden;
  margin-left: 7px;
}
.audio-volume-right::before{
  content: '';
  position: absolute;
  top: 7px;
  right: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid #000;
  border-radius: 50%;
}
.audio-volume-right::after{
  content: '';
  position: absolute;
  top: 3px;
  right: 1px;
  border: 2px solid;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.audio-more{
  margin-left: 8px;
  margin-right: 30px;
  position: relative;
  border: 2px solid #000;
  border-radius: 100%;
}
.audio-more::before{
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  transform: translate(-50%, -100%);
  border: 2px solid #000;
  border-radius: 100%;
  background-color: #000;
}
.audio-more::after{
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  transform: translate(-50%);
  border: 2px solid #000;
  border-radius: 100%;
}

[jsweber]

在线预览

    <div class="audio">
        <button class="audio-play-btn" aria-label="play and pause"></button>
        <div class="audio-time" role="timer" aria-label="show play time"><span>0:05</span><span> / </span><span>0:05</span></div>
        <div class="audio-progress" role="progressbar" aria-valuenow="100" 
        aria-valuemin="0" aria-valuemax="100">
            <button class="audio-progress-btn"></button>
        </div>
        <div class="audio-volumn" role="button" aria-label="set volumn">
            <div class="audio-horn"></div>
            <i></i>
        </div>
        <button class="audio-menu" aria-label="menu">
            <span></span><span></span><span></span>
        </button>
    </div>

    html {
        font-size: 16px;
    }

    @media screen and (min-width: 375px) {
        html {
            font-size: calc(100% + 2 * (100vw - 375px) / 39);
            font-size: calc(16px + 2 * (100vw - 375px) / 39);
        }
    }
    @media screen and (min-width: 414px) {
        html {
            font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
            font-size: calc(18px + 4 * (100vw - 414px) / 586);
        }
    }
    @media screen and (min-width: 600px) {
        html {
            font-size: calc(125% + 4 * (100vw - 600px) / 400);
            font-size: calc(20px + 4 * (100vw - 600px) / 400);
        }
    }
    @media screen and (min-width: 1000px) {
        html {
            font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
            font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
        }
    }

    button{
        padding: 0;
        background-color: transparent;
        color: transparent;
        border: none;
        outline: none;
    }

    body{
        background: #fff;
    }

    .audio{
        --h: 3.375rem;
        width: 17.625rem;
        height: var(--h);
        border-radius: calc(var(--h)/2);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background: #f1f3f4;
    }

    .audio-play-btn{
        width: 0;
        height: 0;
        border: 0.4rem solid transparent;
        border-left: 0.4rem solid #000;
        transform: scalex(1.7);
        transform-origin: center left;
        cursor: pointer;
    }

    .audio-time{
        font-size: 0.75rem;
        color: #494a4a;
        margin-left: -0.4rem;
    }

    .audio-progress{
        position: relative;
        width: 3.3rem;
        height: 0.25rem;
        border-radius: 0.125rem;
        background:#000;
    }

    .audio-progress-btn{
        content: '';
        width: 0.75rem;
        height: 0.75rem;
        background: #000;
        border-radius: 50%;
        position: absolute;
        top: calc((0.25rem - 0.75rem) / 2);
        left: calc(100% - 0.75rem/2);
        cursor: pointer;
    }

    .audio-volumn{
        display: flex;
        --border-width: 0.15rem;
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 50%;
        border: var(--border-width) solid #000;
        background: #f1f3f4;
        text-align: center;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .audio-volumn > i{
        display: inline-block;
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        background: #000;
    }

    .audio-horn{
        width: 0.82rem;
        height: 1.26rem;
        position: absolute;
        left: -0.2rem;
        top: -0.2rem;
        background: #f1f3f4;
    }
    .audio-horn::after{
        content: '';
        border: 0.5rem solid transparent;
        border-right:0.5rem solid #000;
        width: 0;
        height: 0;
        position: absolute;
        top:0.14rem;
        right: 0.1rem;
    }
    .audio-horn::before{
        content: '';
        width: 0.4rem;
        height: 0.4rem;
        background: #000;
        position: absolute;
        left: 0.15rem;
        top: 0.45rem;
    }

    .audio-menu{
        display: flex;
        height: 1rem;
        width: 0.25rem;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }

    .audio-menu span{
        width: 0.25rem;
        height: 0.25rem;
        background: #000;
        border-radius: 50%;
    }

[CandyQiu]

我是一个被播放折磨到放弃的demo

html {
    font-size: 16px;
    background: #fff;
}

body{
    margin: 0;
}

@media screen and (min-width: 375px) {
  html {
    /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}
@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
    font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 1000px往后是每100像素0.5px增加 */
    font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
    font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
  }
}

.audio{
  background: #d6d6d6;
  width: 18.3rem;
  height: 4.5rem;
  padding: 1.25rem 1rem;
}

.audio-content{
  background: #f1f3f4;
  border-radius: 3.2rem;
  height: 100%;
  width: 100%;
  display: flex;

  color: #000;
}

.operate-area{
  padding: 0.75rem 1.3rem;
  display: grid;
  grid-template-columns: 1fr 3fr 2.5fr 1fr 1fr;
  color: #000;
  align-items: center;
  grid-column-gap: 0.5rem;
  width: 100%;
}

.audio-play{
  width: 1rem;
  height: 1rem;
  position: relative;
  right: -0.5rem;
}
.play{
  border-bottom: 0.5rem solid transparent;
  border-left: 1rem solid #000;
  border-top: 0.5rem solid transparent;
}

.audio-time{
  display:flex;
  color: #707172;
  font-size: 1rem;
  position: relative;
  padding: 0 0.3rem;
}

.audio-timeline{
  position: relative;
  display: flex;
  align-items: center;
}

.audio-timeline-line{
  width:100%;
  height: 0.25rem;
  background: #000; 
  display: flex;
  align-items: center;
}

.audio-timeline-playhead{
  height:0.7rem;
  width: 0.7rem;
  border-radius:50%;
  background: #000;
  position: absolute;
  right: 0;
}

.audio-icon-others{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.audio-icon-others div{
  height: 0.25rem;
  width:  0.25rem;
  border-radius:50%;
  background: #000;
  margin-bottom:  0.125rem;
}

.audio-icon-others div:last-child{
  margin-bottom: 0;
}

.audio-icon-sound{
  display: flex;
  align-items:center
}
.square{
  background: #000;
  height:  0.4rem;
  width:  0.4rem;
  position: relative;
  left:  0.4rem;
}

.tringle{
  border-bottom:  0.5rem solid transparent;
  border-right:  0.7rem solid #000;
  border-top:  0.5rem solid transparent;
}
.circle-one-out{
  height:  1rem;
  width:  0.25rem;
  overflow:hidden;

  position: relative;
  left: 0.125rem;
/*   display: flex; */
/*   align-items: center; */
}
.circle-one{
  border-radius: 50%;
  position: relative;
  right: 0.25rem;
  height: 0.5rem;
  width: 0.5rem;
  background: #000;
  margin: 0.25rem 0; 
}
.circle-two{
  box-shadow: 0.125rem 0 0 0 #000;
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
  position: relative;
  right: 0.75rem;
}

<div class="audio">
  <div class="audio-content">
    <div class="operate-area">
      <div class="audio-play">
        <div class="play"></div>
      </div>
      <div class="audio-time">
        <div class="start-time">0:05</div>
        <div class="line">/</div>
        <div class="end-time">0:05</div>
      </div>
      <div class="audio-timeline">
        <div class="audio-timeline-line"></div>
        <div class="audio-timeline-playhead"></div>
      </div>
      <div class="audio-icon-sound">
        <div class="square"></div>
        <div class="tringle"></div>
        <div class="circle-one-out">
           <div class="circle-one"></div>
        </div>
        <div class="circle-two"></div>
      </div>
      <div class="audio-icon-others">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

[silverWolf818]

预览

1. 开发思路依据元素audio标签
2. 按钮扩大点击区域
3. 使用input type='range'

   <style>
       .audio-wrap{
           color: #000;
           font-size: 16px;
       }
       .audio-content{
           display: flex;
           align-items: center;
           width: 25em;
           height: 3.5em;
           padding:0 .625em;
           color: currentColor;
           box-sizing: border-box;
           border-radius: 6.25em;
           background: #f1f3f4;
       }
       .audio-current-time,.audio-time-remaining{
           white-space: nowrap;
           margin-left: .3125em;
           font-size: .9em;
           opacity: 0.87;
       }
       /*滑轨*/
       .audio-controls-timeline {
           font-size: 100%;
           flex: 1;
           margin: 0;
           color: currentColor;
           padding: 1.625em .8125em;
           background: transparent;
           -webkit-appearance: none;
       }
       .audio-controls-timeline::-webkit-slider-thumb {
           margin-top: -.25em;
           -webkit-appearance: none;
           width: .75em;
           height: .75em;
           border-radius: 50%;
           background: currentColor;
       }
       .audio-controls-timeline::-webkit-slider-runnable-track{
           height: .25em;
           border-radius: .125em;
           background: currentColor;
       }
       /*按钮点击区域,扩大点击范围*/
       .audio-controls-button{
           position: relative;
           display: block;
           padding: 0;
           border: 0;
           height: 3em;
           width: 2em;
           overflow: hidden;
           font-size: 100%;
           color: currentColor;
           background: transparent;
       }
       .audio-controls-button:hover::before{
           position: absolute;
           content: '';
           height: 2em;
           width: 2em;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background: rgba(32, 33, 36, 0.06);
           border-radius: 50%;
       }
       /*图标*/
       i[class|='audio-icon']{
           display: inline-block;
       }
       i[class*='-play']{
           vertical-align: -.125em;
           border-width: .5em 0 .5em .8em;
           border-style: solid;
           border-color: transparent transparent transparent currentColor;
       }
       i[class*='-menu']{
           width: .3125em;
           height: .3125em;
           transform: translateY(-50%);
           box-shadow: 0 .5em 0, 0 -.5em 0;
           border-radius: 50%;
           background: currentColor;
       }
       i[class*='-volume']{
           vertical-align: middle;
       }
       i[class*='-volume-left']{
           float: left;
           border-top: .3125em solid transparent;
           border-right: .3125em solid;
           border-bottom: .3125em solid transparent;
       }
       i[class*='-volume-left']::before {
           content: '';
           display: block;
           width: .25em;
           height: .375em;
           background: currentColor;
       }
       i[class*='-volume-right']{
           float: left;
           width: .3125em;
           height: .625em;
           margin-top: -.0625em;
           border: .125em solid;
           padding: .125em .125em .125em 0;
           border-left: 0;
           background-clip: content-box;
           background-color: currentColor;
           border-radius: 0 .625em .625em 0;
       }
       i[class*='-volume-right']::after {
           content: '';
           display: block;
           margin-top: -.25em;
           height: 1.125em;
           width: .125em;
           background-color: #f1f3f4;
       }
   </style>

   <audio controls="controls"><source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"></audio>
   <div class="audio-wrap" style="color: #000;font-size: 14px;">
   <div class="audio-content">
       <button class="audio-controls-button">
           <i class="audio-icon-play"></i>
       </button>
       <div class="audio-current-time">0:00</div>
       <div class="audio-time-remaining">/ 0:08</div>
       <input class="audio-controls-timeline" type="range">
       <button class="audio-controls-button">
           <i class="audio-icon-volume">
               <i class="audio-volume-left"></i>
               <i class="audio-volume-right"></i>
           </i>
       </button>
       <button class="audio-controls-button">
           <i class="audio-icon-menu"></i>
       </button>
   </div>
   </div>
   <div class="audio-wrap" style="color: #00afff;font-size: 16px;margin-top: 20px">
   <div class="audio-content">
       <button class="audio-controls-button">
           <i class="audio-icon-play"></i>
       </button>
       <div class="audio-current-time">0:00</div>
       <div class="audio-time-remaining">/ 0:08</div>
       <input class="audio-controls-timeline" type="range">
       <button class="audio-controls-button">
           <i class="audio-icon-volume">
               <i class="audio-volume-left"></i>
               <i class="audio-volume-right"></i>
           </i>
       </button>
       <button class="audio-controls-button">
           <i class="audio-icon-menu"></i>
       </button>
   </div>
   </div>

[miaomiaolin]

在线DOM

<div class="audio-wrap">
  <button class="audio-button play" title="开始/暂停"></button>
  <span class="audio-time" title="当前时间">00:00</span>
  <span class="audio-time" title="总时长">00:00</span>
  <input class="audio-progressbar" type="range" title="时间进度">
  <button class="audio-button volume" title="音量">
    <span class="audio-volume-icon"><i></i></span>
  </button>
  <button class="audio-button menu" title="菜单"></button>
</div>

.audio-wrap {
  display: flex;
  align-items: center;
  padding: 10px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 28px;
  background: #f1f3f4;
}
.audio-time:nth-child(2):after {
  content: '/';
  margin: 0 5px;
}
/* 时间进度 */
.audio-progressbar {
  -webkit-appearance: none;
  flex: 1;
  height: 5px;
  background: #000;
  border-radius: .25em;
  font-size: 100%;
  mix-blend-mode: darken;
  margin: 0 10px;
}
.audio-progressbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
}
.audio-button {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  padding: 10px;
  background: none;
  border: none;
  position: relative;
  cursor: pointer;
  margin-right: 5px;
}
.audio-button:hover {
  background: rgba(0,0,0,.06);
}
.audio-button:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* 播放按钮 */
.audio-button.play::after {
  border: 7px solid transparent;
  border-left: 10px solid #000;
  left: 7px;
}
/* 菜单按钮 */
.audio-button.menu::after {
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 8px 0, 0 -8px 0;
}
/* 音量 */
.audio-volume-icon {
  display: inline-block;
  padding: 5px 3px;
  margin-left: -7px;
  transform: translate(-50%, -3px);
  border: 7px solid transparent;
  border-right-color: currentColor;
  box-shadow: inset 15px 0 0;
}
.audio-controls-button-volume-icon > i {
  position: relative;
  left: calc(7px * 2);
}
.audio-volume-icon > i::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.4em;
  transform: translate(15px, -50%);
  box-sizing: border-box;
  border: 3px solid;
  border-left: 0;
  border-radius: 0 10px 10px 0;
}
.audio-volume-icon > i::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 10px;
  transform: translate(12px, -50%);
  background: currentColor;
  border-radius: 0 7px 7px 0;
}    

[whrice]

This link

<div class='wrap'>
        <div class='audio'>
            <button class='audio-control'></button>
            <span class='audio-time'>0:01</span>
            <span class='total-time'>/ 0:10</span>
            <div class="audio-slider">
                <button class="slider-track"></button>
                <button class="slider-thumb"></button>
            </div>
            <button class='audio-volume'>
              <i></i>
            </button>
            <button class='audio-menu'>
                <i class="icon" name='menu'></i>
            </button>
        </div>
    </div>

.wrap{
min-width: 400px;
min-height:54px;
display: table-cell;
vertical-align: middle;
border-radius: 100px;
background: #d6d6d6;
}
.audio{
width:90%;
margin:0px auto;
height:80%;
line-height:90%;
position: relative; 
padding-top:12px;

}
.audio-control{
 border:none;
 background:transparent;
 cursor:pointer;
 outline: none;
}
.audio-control::after{
  content:"";
  border:7px solid;
  border-left-width: 11px;
  border-color:transparent transparent transparent black;
  display:inline-block;
  position:relative;
  height:100%;
  vertical-align:middle;
}
.audio span{
display: inline-block;
font-size:12px;
margin-left: -6px;
margin-right:4px;
color: #586069;
margin-top:2px;
}
.audio-time,.total-time{
    display: inline-block;
    height: 32px;
    position: relative;
    top:2px;
}
.audio-slider{
    display: inline-block; 
    --percent:20; 
    position:relative;
}
.slider-track {
    display: block;
    width:180px; 
    height:4px;
    background-color:black;
    border-radius: 2px;
    border: 0;
    padding: 0;
    outline: 0;
}
.slider-track::before {
    content: '';
    display: block;
    height: 100%;
    background-color: skyblue;
    width: calc(1% * var(--percent));
}
.slider-thumb {
    position: absolute;
    width: 16px; 
    height: 16px;
    border: 0; 
    padding: 0;
    background: #fff;
    box-shadow: 0 0 0 1px skyblue;
    border-radius: 50%;
    left: calc(1% * var(--percent));
    top:-6px;
    margin: auto -8px;
    outline:none;
}

.audio-volume,.audio-menu{
    position: relative;
    margin-left:20px;
    outline:none;
    border: none;
    background:transparent;
}
.audio-volume::before{
    content: '';
    position: absolute;
    background:black;
    width: 0.25em;
    height: 0.375em;
    border-style: solid;
    left: 0;
    top:-7px;
    background-clip: content-box;
    border-color: transparent currentColor transparent transparent;
}
.audio-volume::after{
    content: '';
    width: 0.625em;
    height: 0.625em;
    position: absolute;
    right: -4px;
    top: -8.6px;
    border-radius: 50%;
    border: 0.125em solid;
    padding: 0.125em;
    background: currentColor;
    background-clip: content-box;
    clip: rect(0,1.125em,1.125em,0.6875em);
}
.icon[name='menu']{
    display: inline-block;
    position: relative;
    width: 0.25em;
    height: 0.25em;
    border-radius: 50%;
    background:black;
    box-shadow: 0 -.4em 0 0 black,0 .4em 0 0 black;
}

Error: 1 因为不知道audio的按钮怎么用css渲染，参考了上面的代码，但是对一些属性大小的设置不是很理解。 2 行内元素的居中设置不是很顺利 3 不具有扩展性，当想改变audio的长宽时，发现里面的元素位置会错位，且不会相应的伸展。

[sghweb]

在线demo

  <div class="audio">
    <div class="audio__btn"></div>
    <div class="audio__time">
      <span>0:05</span>
      <i>/</i>
      <span>0:05</span>
    </div>
    <input type="range" class="audio__range">
    <div class="audio__icon">
      <i></i>
      <span></span>
    </div>
    <div class="audio__dian">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

body {
  padding: 0;
  margin: 0;
  background: #d6d6d6;
}
.audio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 55px;
  border-radius: 30px;
  padding: 0 20px;
  min-width: 320px;
  margin: 15px auto;
  background: #f1f3f4;
}
.audio__btn {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-left: 16px solid #2f2f2f;
  border-bottom: 12px solid transparent;
}
.audio__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78px;
  font-size: 16px;
  color: #5b5c5c;
  margin-left: 15px;
  margin-right: 15px;
}
.audio__range {
  -webkit-appearance: none;
  flex: 1;
  height: 4px;
  font-size: 100%;
  color: #191919;
  background: #191919;
  border-radius: 4px;
}
.audio__range[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #191919;
  border-radius: 50%;
  /*外观设置为圆形*/
}
.audio__icon {
  position: relative;
  width: 45px;
  height: 24px;
  margin-left: 15px;
}
.audio__icon span {
  position: absolute;
  top: 0;
  left: 6px;
  display: block;
  border-right: 12px solid #191919;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  height: 12px;
}
.audio__icon i {
  position: absolute;
  top: 6px;
  left: 0;
  width: 12px;
  height: 12px;
  background: #191919;
}
.audio__icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 10px;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: currentColor;
  border-radius: 0 .3em .3em 0;
}
.audio__icon::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 24px;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  border: .16em solid;
  border-left: 0;
  border-radius: 0 .7em .7em 0;
}
.audio__dian {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
  width: 6px;
}
.audio__dian span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #191919;
}

[frankyeyq]

demo

<div class="audio-player">
    <div class="audio-player--button-play">
        <div class="audio-player--button-play-icon"></div>
    </div>
    <div class="audio-player--time">
        <span class="audio-player--time-duration">0:05</span>
        <span class="audio-player--time-separator">/</span>
        <span class="audio-player--time-total">0:05</span>
    </div>
    <div class="audio-player--slider-wrapper">
        <div class="audio-player--slider">
            <div class="audio-player--slider-bar" style="width: 50%;"></div>
            <div class="audio-player--slider-button-wrapper" style="left: 50%;">
                <div class="audio-player--slider-button"></div>
            </div>
        </div>
    </div>
    <div class="audio-player--voice-wrapper">
        <div class="audio-player--voice">
            <i></i>
        </div>
    </div>
    <div class="audio-player--more">
        <i></i>
        <i></i>
        <i></i>
    </div>
</div>

.audio-player {
    width: 400px;
    border-radius: 54px;
    height: 54px;
    --mainBC: #f1f3f4;
    background-color: var(--mainBC);
    display: flex;
    align-items: center;
    justify-content: space-between;
    --color: black;
}
.audio-player--button-play {
    text-align: center;
    --btnWidth: 32px;
    --btnHeight: 32px;
    width: var(--btnWidth);
    height: var(--btnHeight);
    line-height: var(--btnHeight);
    font-size: 0;
    margin-left: 10px;
    border-radius: 50%;
    cursor: pointer;
}
.audio-player--button-play:hover {
    background: rgb(229, 231, 232);
}
.audio-player--button-play-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent currentColor;
    border-width: calc(10px / 1.428) 0 calc(10px / 1.428) 10px;
    border-style: solid;
    transform-origin: 0 0 0;
}
.audio-player--time {
    font-size: 14px;
}
.audio-player--slider-wrapper {
    width: 20%;
    flex-grow: 1;
    margin: 0 10px;
}
.audio-player--slider {
    position: relative;
    width: 100%;
    background-color: #595959;
    height: 4px;
    border-radius: 4px;
}
.audio-player--slider-bar {
    height: 4px;
    background-color: currentColor;
}
.audio-player--slider-button-wrapper {
    width: 32px;
    height: 32px;
    position: absolute;
    top: -14px;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}
.audio-player--slider-button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
}
.audio-player--voice-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-content: center;
}
.audio-player--voice {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.audio-player--voice:before {
    content: '';
    width: 4px;
    height: 6px;
    border-color: var(--mainBC) currentColor var(--mainBC) var(--mainBC);
    border-width: 4px 4px 4px 0;
    border-style: solid;
    background-color: currentColor;
    display: inline-block;
}
.audio-player--voice i {
    font-size: 0;
    position: relative;
    margin-left: 2px;
}
.audio-player--voice i:before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 12px;
    border: 2px solid;
    border-left: 2px;
    border-radius: 0 8px 8px 0;
    background-color: var(--mainBC);
    vertical-align: middle;
}
.audio-player--voice i:after {
    content: '';
    width: 3px;
    height: 6px;
    border-radius: 0 3px 3px 0;
    background-color: currentColor;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.audio-player--more {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-around;
    cursor: pointer;
}
.audio-player--more i {
    width: 6px;
    height: 6px;
    display: block;
    margin: 1px;
    border-radius: 50%;
    background: currentColor;
}

[wind1996]

jsBin

<div class="audio">
  <div class="play"></div>
  <div class="pause"></div>
  <div class="time">1:23/4:33</div>
  <div class="progress-bar">
    <div class="progress-all"></div>
    <div class="progress-has-play"></div>
    <div class="dot"></div>
  </div>
  <div class="vol">
    <div></div>
  </div>
  <div class="more">
  </div>
</div>

.audio {
  height: 56px;
  border-radius: 28px;
  display: flex;
  background: #f1f3f4;
  padding: 12px;
  box-sizing: border-box;
}

body {
  background: black;
}

.pause,
.vol,
.more,
.play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time {
  line-height: 32px;
  margin: 0 4px;
}

.pause::after {
  content: '';
  border-left: solid 4px #000000;
  border-right: solid 4px #000000;
  height: 14px;
  width: 6px;
}

.progress-bar {
  flex: 1;
  width: 0;
  position: relative;
  margin: 0 4px;
}

.progress-all, .progress-has-play {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 4px;
  background: #59595a;
  width: 100%;
  border-radius: 2px;
  margin: auto;
}

.progress-has-play {
  width: 30px;
  background: #000
}

.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  margin: auto;
  left: 30px;
  background: black;
}

.play::after {
  content: '';
  border-left: solid 10px #000000;
  border-top: solid 8px transparent;
  border-bottom: solid 8px transparent;
  height: 0;
  width: 0;
}

.more::after {
  content: '';
  border-left: dotted 4px #000000;
  height: 16px;
}

.pause:hover,
.vol:hover,
.more:hover,
.play:hover {
  background: #d7d7d7;
}

.vol {
  position: relative;
}

.vol > div {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #000000;
  background: black;
  background-clip: content-box;
  padding: 2px;
}

.vol::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background: black;
  left: 4px;
}

.vol::before {
  position: absolute;
  content: '';
  left: 5px;
  border-right: solid 10px #000000;
  border-top: solid 8px #f1f3f4;
  border-bottom: solid 8px #f1f3f4;
  outline: 2px solid #f1f3f4;
}

.vol:hover::before {
  outline: 2px solid #d7d7d7;;
  border-top: solid 8px #d7d7d7;
  border-bottom: solid 8px #d7d7d7;
}

[zhangxinxu]

1. 自适应使用flex是比较好的方法，图标按钮尺寸固定，进度条宽度自适应；
2. 进度条使用 input[type="range"] 是非常棒的实现与想法；
3. 自适应不是等比例缩放，而是进度条宽度自适应；
4. 注意视觉还原；
5. 命名上注意上下文，例如audio-开头；
6. CSS图标尽快使用伪元素，更好维护；
7. CSS图标常用技巧：万能，box-shadow，linear-gradient/radial-radient，clip-path。