自定义音频播放样式结合Howler.js

滑动式滚动条

请添加图片描述

不使用audio默认样式  自定义音频播放样式
当前时间 开始时间 结束时间 可播放可暂停 滚动条可拖动进行同步
具体样式可调整

npm install howler --save

<template>
  <div class="audio-player">
    <div v-if="isLoading" class="loading-message">音频加载中...</div>
    <div v-else>
      <div class="audio-time-info">
        <span>开始时间: {{ formatDuration(startTime) }}</span>
        <span>当前时间: {{ formatDuration(currentTime) }}</span>
        <span>结束时间: {{ formatDuration(endTime) }}</span>
      </div>
      <div class="progress-container">
        <input
          type="range"
          class="progress-bar"
          :min="0"
          :max="duration"
          v-model.number="currentTime"
          @input="onSeek"/>
        <div class="progress-fill" :style="{ width: progressWidth }"></div>
      </div>
      <div class="control-buttons">
        <button @click="togglePlayPause">{{ playPauseButtonText }}</button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  computed
} from 'vue';
import { Howl, Howler } from 'howler';
function formatDuration(seconds: number): string {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);
  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  } else {
    return `${minutes}:${secs.toString().padStart(2, '0')}`;
  }
}
export default defineComponent({
  setup() {
    const audioSrc = ref('../20250109.wav'); // 请替换为实际的音频文件路径
    const sound = ref<Howl | null>(null);
    const currentTime = ref(0);
    const duration = ref(0);
    const startTime = ref(0);
    const endTime = ref(0);
    const playing = ref(false);
    const isLoading = ref(true);
    let requestId: number | null = null;

    const initAudio = () => {
      isLoading.value = true;
      sound.value = new Howl({
        src: [audioSrc.value],
        onload: () => {
          duration.value = sound.value!.duration();
          endTime.value = sound.value!.duration();
          isLoading.value = false;
        },
        onplay: () => {
          playing.value = true;
          startTime.value = sound.value!.seek();
          startUpdatingTime();
        },
        onpause: () => {
          playing.value = false;
          stopUpdatingTime();
        },
        onend: () => {
          playing.value = false;
          startTime.value = 0;
          currentTime.value = 0;
          stopUpdatingTime();
        }
      });
    };

    const togglePlayPause = () => {
      if (sound.value) {
        if (playing.value) {
          sound.value.pause();
        } else {
          sound.value.play();
        }
      }
    };

    const onSeek = () => {
      if (sound.value) {
        sound.value.seek(currentTime.value);
      }
    };

    const startUpdatingTime = () => {
      const update = () => {
        if (sound.value && playing.value) {
          currentTime.value = sound.value!.seek();
          requestId = requestAnimationFrame(update);
        }
      };
      requestId = requestAnimationFrame(update);
    };

    const stopUpdatingTime = () => {
      if (requestId) {
        cancelAnimationFrame(requestId);
        requestId = null;
      }
    };

    onMounted(() => {
      initAudio();
    });

    onBeforeUnmount(() => {
      if (sound.value) {
        sound.value.unload();
      }
    });

    const progressWidth = computed(() => {
      if (duration.value > 0) {
        const percentage = (currentTime.value / duration.value) * 100;
        return `${percentage}%`;
      }
      return '0%';
    });

    return {
      sound,
      currentTime,
      duration,
      startTime,
      endTime,
      playing,
      togglePlayPause,
      onSeek,
      playPauseButtonText: computed(() => playing.value ? '暂停' : '播放'),
      formatDuration,
      isLoading,
      progressWidth
    };
  }
});
</script>
<style scoped>
.audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.audio-time-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
}

.audio-time-info span {
  font-size: 14px;
  color: #666;
}

/* Progress Container */
.progress-container {
  position: relative;
  width: 100%;
  height: 8px; /* 设置一个合适的高度 */
  background-color: #ddd;
  border-radius: 4px; /* 圆角边框 */
  overflow: hidden;
  cursor: pointer;
}

/* Progress Bar (Hidden Input) */
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  opacity: 0; /* 使输入不可见 */
  z-index: 2; /* 确保它覆盖在 .progress-fill 上 */
  cursor: pointer;
}

/* Webkit 浏览器的滑块样式 */
.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Firefox 浏览器的滑块样式 */
.progress-bar::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Progress Fill */
.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.2s linear;
  /* appearance: none; 改变元素默认风格 */
  /* background-color: #0074fd; */
  z-index: 1;
}

.control-buttons button {
  width:60px;
  margin:10px 0 0 0;
  padding: 8px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.control-buttons button:hover {
  background-color: #45a049;
}

.loading-message {
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
</style>

跳跃式滚动条

请添加图片描述

不使用audio默认样式  自定义音频播放样式
当前时间 开始时间 结束时间 可播放可暂停 滚动条可拖动进行同步
具体样式可调整

npm install howler --save

<template>
<!-- 跳跃式进度 -->
  <div class="audio-player">
    <div v-if="isLoading" class="loading-message">音频加载中...</div>
    <div v-else>
      <div class="audio-time-info">
        <span>开始时间: {{ formatDuration(startTime) }}</span>
        <span>结束时间: {{ formatDuration(endTime) }}</span>
        <span>当前时间: {{ formatDuration(currentTime) }}</span>
      </div>
      <input
        type="range"
        class="progress-bar"
        :min="0"
        :max="duration"
        v-model.number="currentTime"
        @input="onSeek"/>
      <div class="control-buttons">
        <button @click="togglePlayPause">{{ playPauseButtonText }}</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  computed,
  onUnmounted
} from 'vue';
import { Howl, Howler } from 'howler';

function formatDuration(seconds: number): string {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);
  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  } else {
    return `${minutes}:${secs.toString().padStart(2, '0')}`;
  }
}

export default defineComponent({
  setup() {
    const audioSrc = ref('../20250109.wav'); // 请替换为实际的音频文件路径
    const sound = ref<Howl | null>(null);
    const currentTime = ref(0);
    const duration = ref(0);
    const startTime = ref(0);
    const endTime = ref(0);
    const playing = ref(false);
    const isLoading = ref(true);
    let requestId: number | null = null;

    const initAudio = () => {
      isLoading.value = true;
      sound.value = new Howl({
        src: [audioSrc.value],
        onload: () => {
          duration.value = sound.value!.duration();
          endTime.value = sound.value!.duration();
          isLoading.value = false;
        },
        onplay: () => {
          playing.value = true;
          startTime.value = sound.value!.seek();
          startUpdatingTime();
        },
        onpause: () => {
          playing.value = false;
          stopUpdatingTime();
        },
        onend: () => {
          playing.value = false;
          startTime.value = 0;
          currentTime.value = 0;
          stopUpdatingTime();
        }
      });
    };

    const togglePlayPause = () => {
      if (sound.value) {
        if (playing.value) {
          sound.value.pause();
        } else {
          sound.value.play();
        }
      }
    };

    const onSeek = () => {
      if (sound.value) {
        sound.value.seek(currentTime.value);
      }
    };

    const startUpdatingTime = () => {
      const update = () => {
        if (sound.value && playing.value) {
          currentTime.value = sound.value!.seek();
          requestId = requestAnimationFrame(update);
        }
      };
      requestId = requestAnimationFrame(update);
    };

    const stopUpdatingTime = () => {
      if (requestId) {
        cancelAnimationFrame(requestId);
        requestId = null;
      }
    };

    onMounted(() => {
      initAudio();
    });

    onBeforeUnmount(() => {
      if (sound.value) {
        sound.value.unload();
      }
    });

    onUnmounted(() => {
      stopUpdatingTime();
    });

    watch(currentTime, () => {
      if (sound.value) {
        sound.value.seek(currentTime.value);
      }
    });

    return {
      sound,
      currentTime,
      duration,
      startTime,
      endTime,
      playing,
      togglePlayPause,
      onSeek,
      playPauseButtonText: computed(() => (playing.value? '暂停' : '播放')),
      formatDuration,
      isLoading
    };
  }
});
</script>

<style scoped>
.audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}
.audio-time-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
}
.audio-time-info span {
  font-size: 14px;
  color: #666;
}
.progress-bar {
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 5px;
}
.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.progress-bar::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.control-buttons button {
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}
.loading-message {
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
</style>

自定义音频播放组件

如需更改可进行更改样式

请添加图片描述

不使用audio默认样式  自定义音频播放样式
当前时间 开始时间 结束时间 可播放可暂停 滚动条可拖动进行同步
具体样式可调整

npm install howler --save

父组件

<template>
  <div>
    <AudioPlayer :src="'../20250109.wav'" @play="handlePlay" @pause="handlePause" @end="handleEnd" />
    // src对应你的音频文件
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import AudioPlayer from './components/pop.vue';

export default defineComponent({
  components: {
    AudioPlayer
  },
  methods: {
    handlePlay() {
      console.log('音频开始播放');
    },
    handlePause() {
      console.log('音频暂停');
    },
    handleEnd() {
      console.log('音频播放结束');
    }
  }
});
</script>

子组件

components-pop.vue

<template>
  <div class="audio-player">
    <div v-if="isLoading" class="loading-message">音频加载中...</div>
    <div v-else>
      <div class="audio-time-info">
        <span>开始时间: {{ formatDuration(startTime) }}</span>
        <span>当前时间: {{ formatDuration(currentTime) }}</span>
        <span>结束时间: {{ formatDuration(endTime) }}</span>
      </div>
      <div class="progress-container">
        <input
          type="range"
          class="progress-bar"
          :min="0"
          :max="duration"
          v-model.number="currentTime"
          @input="onSeek"/>
        <div class="progress-fill" :style="{ width: progressWidth }"></div>
      </div>
      <div class="control-buttons">
        <button @click="togglePlayPause">{{ playPauseButtonText }}</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, onMounted, onBeforeUnmount, watch, computed } from 'vue';
import { Howl, Howler } from 'howler';

export default defineComponent({
  name: 'AudioPlayer',
  props: {
    src: {
      type: String as PropType<string>,
      required: true,
    },
  },
  emits: ['play', 'pause', 'end'],
  setup(props, { emit }) {
    const sound = ref<Howl | null>(null);
    const currentTime = ref(0);
    const duration = ref(0);
    const startTime = ref(0);
    const endTime = ref(0);
    const playing = ref(false);
    const isLoading = ref(true);
    let requestId: number | null = null;

    const initAudio = () => {
      isLoading.value = true;
      sound.value = new Howl({
        src: [props.src],
        onload: () => {
          duration.value = sound.value!.duration();
          endTime.value = sound.value!.duration();
          isLoading.value = false;
        },
        onplay: () => {
          playing.value = true;
          startTime.value = sound.value!.seek();
          startUpdatingTime();
          emit('play');
        },
        onpause: () => {
          playing.value = false;
          stopUpdatingTime();
          emit('pause');
        },
        onend: () => {
          playing.value = false;
          startTime.value = 0;
          currentTime.value = 0;
          stopUpdatingTime();
          emit('end');
        }
      });
    };

    const togglePlayPause = () => {
      if (sound.value) {
        if (playing.value) {
          sound.value.pause();
        } else {
          sound.value.play();
        }
      }
    };

    const onSeek = () => {
      if (sound.value) {
        sound.value.seek(currentTime.value);
      }
    };

    const startUpdatingTime = () => {
      const update = () => {
        if (sound.value && playing.value) {
          currentTime.value = sound.value!.seek()!;
          requestId = requestAnimationFrame(update);
        }
      };
      requestId = requestAnimationFrame(update);
    };

    const stopUpdatingTime = () => {
      if (requestId) {
        cancelAnimationFrame(requestId);
        requestId = null;
      }
    };

    onMounted(() => {
      initAudio();
    });

    onBeforeUnmount(() => {
      if (sound.value) {
        sound.value.unload();
      }
    });

    const progressWidth = computed(() => {
      if (duration.value > 0) {
        const percentage = (currentTime.value / duration.value) * 100;
        return `${percentage}%`;
      }
      return '0%';
    });

    const formatDuration = (seconds: number): string => {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const secs = Math.floor(seconds % 60);
      if (hours > 0) {
        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
      } else {
        return `${minutes}:${secs.toString().padStart(2, '0')}`;
      }
    };

    return {
      sound,
      currentTime,
      duration,
      startTime,
      endTime,
      playing,
      togglePlayPause,
      onSeek,
      playPauseButtonText: computed(() => playing.value ? '暂停' : '播放'),
      formatDuration,
      isLoading,
      progressWidth,
    };
  }
});
</script>

<style scoped>
/* 省略了之前的样式部分，因为它们已经符合要求 */
.audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.audio-time-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  width: 100%;
}

.audio-time-info span {
  font-size: 14px;
  color: #666;
}

/* Progress Container */
.progress-container {
  position: relative;
  width: 100%;
  height: 8px; /* 设置一个合适的高度 */
  background-color: #ddd;
  border-radius: 4px; /* 圆角边框 */
  overflow: hidden;
  cursor: pointer;
}

/* Progress Bar (Hidden Input) */
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  opacity: 0; /* 使输入不可见 */
  z-index: 2; /* 确保它覆盖在 .progress-fill 上 */
  cursor: pointer;
}

/* Webkit 浏览器的滑块样式 */
.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Firefox 浏览器的滑块样式 */
.progress-bar::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Progress Fill */
.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.2s linear;
  z-index: 1;
}

.control-buttons button {
  width:60px;
  margin:10px 0 0 0;
  padding: 8px;
  border: none;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.control-buttons button:hover {
  background-color: #45a049;
}

.loading-message {
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
</style>