uniapp H5自定义封装 音频播放组件

先看效果

1.点击播放直接播放音频

2.拖动滑动条可以定位到相应位置播放

3.滑动条根据播放进度自动移动

4.可以点击左右箭头进行上下曲切换

<template>
	<view class="customAudio flex">
		<view class="left">
			<image :src="music.img" mode=""></image>
		</view>
		<view class="right">
			<view class="progressBox flex">
				<text class="startTime">{
   {
    getMinuteTime(now_time) }}</text>
				<view class="progress">
					<slider
						class="slider"
						:value="(now_time / trueTime) * 100"
						:disabled="sliderDisabled"
						@change="sliderChange"
					/>
				</view>
				<text class="endTime">{
   {
    total_time }}</text>
			</view>
			<view class="bottom flex">
				<view class="control flex">
					<view class="prev side flex" @click="playNext('prev')">
						<image
							src="https://dayuding.wisesoft.org.cn/images/yijiyou/scenic-spot/prev.png"
							mode="widthFix"
						></image>
					</view>
					<view class="start_stop flex">
						<view class="flex" @click="playAudio">
							<text v-if="playType" class="iconfont icon-24gf-pause2"></text>
							<text v-else class="iconfont icon-bofang1"></text>
						</view>
					</view>
					<view class="next side flex" @click="playNext('next')">
						<image
							src="https://dayuding.wisesoft.org.cn/images/yijiyou/scenic-spot/next.png"
							mode="widthFix"
						></image>
					</view>
				</view>
				<view class="list">
					<text class="iconfont icon-24gf-playlistMusic3"></t