Vue实现audio播放音频【切换播放拖动进度条播放】

.headbg { width: 100%; height: 3rem; } .banner-lab { position: absolute; top: 0; width: 100%; padding-top: 0.5rem; height: 3rem; } .banner-divimg { width: 90%; margin: 0 auto; display: inline-block; height: 3.5rem; } .banner-name { position: absolute; z-index: 2; left: 1.1rem; top: 1.1rem; } .banner-title { position: absolute; z-index: 2; left: 1.1rem; top: 1.75rem; } .banner-desc { position: absolute; z-index: 2; left: 1.1rem; font-size: 0.28rem; top: 2.8rem; } } .audio-div { position: relative; width: 100%; height: 2.4rem; background: #fff; margin-bottom: 0.2rem; .audio-block { width: 100%; height: 0.9rem; display: inline-block; position: relative; .header { position: relative; width: 68%; display: inline-block; top: 0; text-align: center; height: 0.7rem; line-height: 0.7rem; .slider { width: 100%; position: relative; height: 0.1rem; left: 1.2rem; display: flex; align-items: center; bottom: 0.15rem;

bottom: 0.15rem; cursor: default; border-radius: 0.3rem; user-select: none; outline: none; } .silderNone { position: absolute; height: 0.1rem; width: 100%; background-color:#ccc; left: 0; border-radius: 0.3rem; top: 50%; margin-top: -1px; } .slider-track { position: absolute; height: 0.1rem; left: 0; right: 0; border-radius: 0.3rem; top: 50%; background-color: #e4e4e4; } .slider-fill { position: absolute; height: 0.1rem; width: 100%; background-color: #ffbb38; left: 0; border-radius: 0.3rem; top: 50%; margin-top: -1px; } .slider-thumb { position: absolute; width: 0.27rem; top: 0.08rem; height: 0.27rem; background-color: #ffbb38; color: #ffbb38; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; }

.startTime { font-size: 0.25rem; position: absolute; z-index: 2; left: 0.35rem; font-size: 0.26rem; bottom: 0.45rem; } .endtime { font-size: 0.25rem; position: absolute; z-index: 2; left: 6.5rem; bottom: 0.45rem; } }

} } .model-div { position: relative; width: 100%; bottom: 0.5rem; height: 1rem; text-align: center; } .playicon { width: 1rem; height: 1rem; position: relative; display: inline-block; top: 0; } .lasticon { position: absolute; width: 0.74rem; height: 0.74rem; left: 1.2rem; top: 0.2rem; } .nexticon { position: absolute; width: 0.74rem; height: 0.74rem; right: 1.2rem; top: 0.2rem; } } // .contents { position: relative; width: 100%; height: 3.04rem; margin-bottom: 0.2rem; background: #fff; .contents-div { position: relative; width: 100%; top: 0.1rem; padding-top: 0.3rem; height: 0.5rem; /* background: red; */ .label-cont { position: absolute; left: 0.26rem; font-size: 0.4rem; font-family: PingFangSC-Medium; font-weight: 500; color: rgba(247, 97, 21, 1); z-index: 1; } .label-block { position: absolute; left: 0.22rem; width: 1.69rem; height: 0.14rem; background: rgba(255, 234, 205, 1); border-radius: 0.7rem; bottom: 0.1rem; }

} } .label-text { position: absolute; font-size: 0.3rem; font-family: PingFangSC-Medium; font-weight: 500; width: 7rem; height: 1.66rem; line-height: 1.5em; left: 0.3rem; top: 1rem; left: 0.3rem; color: rgba(88, 96, 106, 1); } } .welfare-div { position: relative; width: 100%; height: 3.34rem; background: #ffffff; .contents-div { position: relative; width: 100%; top: 0.1rem; padding-top: 0.3rem; height: 0.5rem; /* background: red; */ .label-cont { position: absolute; left: 0.26rem; font-size: 0.4rem; font-family: PingFangSC-Medium; font-weight: 500; color: rgba(247, 97, 21, 1); z-index: 1; } .label-block { position: absolute; left: 0.22rem; width: 1.69rem; height: 0.14rem; background: rgba(255, 234, 205, 1); border-radius: 0.7rem; bottom: 0.1rem; } } .label-div { position: relative; width: 100%; height: 2rem; top: 0.2rem; text-align: center; } .left-div { position: absolute; left: 0.3rem; width: 3.32rem; background: #fff; height: 1.52rem; top: 0.2rem; } .right-div {

.right-div { position: absolute; right: 0.3rem; width: 3.32rem; background: #fff; top: 0.2rem; height: 1.52rem; } .auimg { width: 3.32rem; height: 1.58rem; } .auimgName { position: absolute; z-index: 1; top: 0.35rem; left: 0; width: 100%; display: inline-block; font-size: 0.5rem; font-family: PingFang SC; font-weight: 500; color: rgba(87, 26, 10, 1); text-align: center; } .auimgTitle { position: absolute; z-index: 1; width: 100%; left: 0; text-align: center; height: 0.3rem; display: inline-block; /* background: #007AFF; */ top: 1rem; font-size: 0.28rem; font-family: PingFang SC; font-weight: 400; color: rgba(150, 84, 61, 1); } }}