vue怎么实现【音频播放器】？css可根据自己的需求调整

 

我这里采用的是音频插件，然后修改的样式的方式：

首先安装 音频插件

npm install --save vue-aplayer

html：然后引入插件使用

 

 css：

<style lang='scss' scoped>

/deep/.aplayer{

  box-shadow: inherit;

  background-color: #F7F7F7;

  border-radius: 10px;

  width: 100%;

  .aplayer-body{

    .aplayer-pic{

      background-image: inherit;

      background:rgba(3, 186, 130,0.3);

      border-radius: 10px;

      .aplayer-button{

        background:#03BA82;

        border: 0;

        width: 40px;

        height: 40px;

        opacity: inherit;

      }

      .aplayer-pause{

        right: 25px;

        bottom: 25px;

        .aplayer-icon-pause{

          width: 25px;

          height: 25px;

          left: 7px;

          top: 7.3px;

        }

      }

      .aplayer-play{

        .aplayer-icon-play{

          width: 30px;

          height: 30px;

          left: 6px;

          top: 5px;

        }

      }

    }

    .aplayer-info{

      padding:15px 30px;

      padding-left: 15px;

      .aplayer-music{

        .aplayer-title{

          color: #999;

          font-size: 20px;

        }

        .aplayer-author{

          display: none;

        }

      }

      .aplayer-controller{

        .aplayer-bar-wrap{

          .aplayer-bar{

            height: 8px;

            border-radius: 4px;

            background: #eee;

            .aplayer-loaded{

              height: 8px;

              border-radius: 4px;

              background: #eee;

            }

            .aplayer-played{

              height: 8px;

              border-radius: 4px;

              .aplayer-thumb{

                width: 16px;

                height: 16px;

              }

            }

          }

        }

        .aplayer-time{

          .aplayer-time-inner{

            font-size: 20px;

            color: #333;

          }

        }

        .aplayer-icon{

          display: none;

        }

      }

    }

  }

}

</style>

    希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~