前言
在平时使用工具的时一直想着拥有自己的一套npm库,但是迟迟没有动静,这次项目中使用audio,想着封装一套自定义的audio小工具,下面我会为大家做详细介绍以及在途中遇到的坑
创建项目
可以使用两种方式创建vue3项目
1.第一种方式 vite
2.第二种方式创建 @vue/cli
相比之下我更喜欢使用vite创建(1.开发环境中,无需打包操作,可快速的冷启动2.轻量快速的热重载(HMR)3.真正的按需编译,不再等待整个应用编译完成),此处不过多介绍
npm init vite@latest
创建步骤
- 提示我们安装是否需要create-vite@5.2.3依赖,选择y,可以快速创建一个vite项目
- 起一个组件名称,然后选择vue
- 这里我们选择javaScript,项目中没有使用TS,然后按回车
- 安装成功
- 项目中我们需要使用到element-plus,需要手动下载
npm install element-plus --save
- –save 等同于 -S (常用,可保存在package.json文件中),
-S, --save 安装包信息将加入到dependencies(生产阶段的依赖,也就是项目运行时的依赖,就是程序上线后仍然需要依赖) - –save-dev 等同于 -D
-D, --save-dev 安装包信息将加入到devDependencies(开发阶段的依赖,就是我们在开发过程中需要的依赖,只在开发阶段起作用。)
创建组件
- 首先在项目中src目录下创建一个package文件夹
- 在package文件夹下创建一个.vue文件(自定义组件名)
- 这里就开始封装我们需要的组件
组件我不做介绍,不懂得爱豆请联系我
<template>
<div>
<audio @timeupdate="updateProgress"
controls
autoplay
ref="audioRef"
id="myaudio"
style="display: none">
<source :src="audioUrl"
type="audio/mpeg" />
您的浏览器不支持音频播放
</audio>
<div class="audio_right"
:style="{background:GradientBg}">
<img class="audio_icon"
src="../assets/images/Fastrewind.png"
@click="Fastrewind"
alt="快退" />
<span class="advanceRetreat">-{
{
backSecond}}s</span>
<img v-if="audioIsPlay"
@click="playAudio"
class="audio_icon"
src="../assets/images/play.png"
alt="播放" />
<img v-if="!audioIsPlay"
@click="playAudio"
class="audio_icon"
src="../assets/images/pause.png"
alt="暂停" />
<span class="advanceRetreat">+{
{
forwardSecond}}s</span>
<img class="audio_icon"
src="../assets/images/fastForward.png"
@click="fastForward"
alt="快进" />
<el-slider class="slider_box"
v-model="currentProgress"
:show-tooltip="false"
@input="handleProgressChange" />
<div class="audio_time">
<span class="audio_current">{
{
audioStart }}</span>
/
<span class="audio_total">{
{
durationTime }}</span>
</div>
<div class="volume">
<div class="volume_progress"
v-show="audioHuds">
<el-slider vertical
height="100px"
class="volume_bar"
v-model="audioVolume"
:show-tooltip="false"
@change="handleAudioVolume" />
<span class="Volume_Level"> {
{
audioVolume}}%</span>
</div>
<img class="volume_icon"
v-if="audioVolume <= 0"
@click.stop="audioHuds = !audioHuds"
src="../assets/images/audio_mute.png"
alt="" />
<img class="volume_icon"
v-if="audioVolume > 0"
@click.stop="audioHuds = !audioHuds"
src="../assets/images/audio_high.png"
alt="" />
</div>
</div>
</div>
</template>
<script>
export default {
//一定要写组件名,切记切记★★★
name: 'l-vue3-audio'
}
</script>
<script setup name='l-vue3-audio'>
import {
ref, onMounted, watch, onUnmounted, computed } from "vue";
const props = defineProps({
audioUrl: String, //试听的链接
isPauseTtsAudio: Boolean, //是否暂停播放试听
color1: {
//背景颜色
type: String,
default: '#9cafe8'
},
color2: {
//背景颜色
type: String,
default: '#9cebb8'
},
isinit: {
//是否初始化
type: Boolean,
default: false
},
backSecond