vue3 + Element Plus自定义音频audio样式及控件

这篇具有很好参考价值的文章主要介绍了vue3 + Element Plus自定义音频audio样式及控件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、原生的audio控件写法及效果图:

element 音频,音视频,vue.js,前端element 音频,音视频,vue.js,前端

由于audio标签原生样式不能修改UI样式,所以需要隐藏原生audio标签,重新写一个控件进行操作audio

2、自定义写法及效果图:

代码实现:

先封装一个组件audioPlayer.vue。注意:需提前安装了Element Plus

<template>
  <div>
    <audio
      @timeupdate="updateProgress"
      controls
      ref="audioRef"
      style="display: none"
    >
      <source :src="audioUrl" type="audio/mpeg" />
      您的浏览器不支持音频播放
    </audio>
    <div class="audio_right">
      <img
        v-if="!audioIsPlay"
        @click="playAudio"
        class="audio_icon"
        src="../../../assets/img/play.png"
        alt="播放"
      />
      <img
        v-if="audioIsPlay"
        @click="playAudio"
        class="audio_icon"
        src="../../../assets/img/pause.png"
        alt="暂停"
      />
      <el-slider
        class="slider_box"
        v-model="currentProgress"
        :show-tooltip="false"
        @input="handleProgressChange"
      />
      <div class="audio_time">
        <span class="audio_current">{{ audioStart }}</span>
        &nbsp;/&nbsp;
        <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"
          />
        </div>
        <img
          class="volume_icon"
          v-if="audioVolume <= 0"
          @click.stop="audioHuds = !audioHuds"
          src="../../../assets/img/audio_mute.png"
          alt=""
        />
        <img
          class="volume_icon"
          v-if="audioVolume > 0"
          @click.stop="audioHuds = !audioHuds"
          src="../../../assets/img/audio_high.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
const props = defineProps({
  audioUrl: String,        //试听的链接
  isPauseTtsAudio: Boolean     //是否暂停播放试听
});
const audioIsPlay = ref(true); //音频是否在播放
const audioStart = ref("0:00");
const durationTime = ref("0:00"); //音频的总时长,显示的时间格式
const duration = ref(0); //音频的总时长
const audioVolume = ref(80); //音量的默认值是0.8
const audioHuds = ref(false); //是否显示音量slider
const audioRef = ref(null);
const currentProgress = ref(0);


watch(() => props.isPauseTtsAudio, (newVal, oldVal) => {
  if (newVal) {
    // 如果 isPauseTtsAudio 为 true,试听暂停
    handleCloseMusic();
  }
});
function handleCloseMusic() {
  audioRef.value.pause();
  audioIsPlay.value = true;
}
onMounted(() => {
  calculateDuration();
});
// 获取音频时长
function calculateDuration() {
  var myVid = audioRef.value;
  myVid.loop = false;
  myVid.src = props.audioUrl;
  // 监听音频播放完毕
  myVid.addEventListener(
    "ended",
    function () {
      audioIsPlay.value = true;
      currentProgress.value = 0;
    },
    false
  );
  if (myVid != null) {
    myVid.oncanplay = function () {
      duration.value = myVid.duration; // 计算音频时长
      durationTime.value = transTime(myVid.duration); //换算成时间格式
    };
    myVid.volume = 0.8; // 设置默认音量50%
    // 进入页面默认开始播放
    audioRef.value.play();
    audioIsPlay.value = false;
  }
}
// 音频播放时间换算
function transTime(duration) {
  const minutes = Math.floor(duration / 60);
  const seconds = Math.floor(duration % 60);
  const formattedMinutes = String(minutes).padStart(2, "0"); //padStart(2,"0") 使用0填充使字符串长度达到2
  const formattedSeconds = String(seconds).padStart(2, "0");
  return `${formattedMinutes}:${formattedSeconds}`;
}
// 播放暂停控制
function playAudio() {
  if (audioRef.value.paused) {
    audioRef.value.play();
    audioIsPlay.value = false;
  } else {
    audioRef.value.pause();
    audioIsPlay.value = true;
  }
}
// 根据当前播放时间,实时更新进度条
function updateProgress(e) {
  var value = e.target.currentTime / e.target.duration;
  if (audioRef.value.play) {
    currentProgress.value = value * 100;
    audioStart.value = transTime(audioRef.value.currentTime);
  }
}
//调整播放进度
const handleProgressChange = (val) => {
  console.log(val);
  if (!val) {
    return;
  }
  let currentTime = duration.value * (val / 100);
  // 更新音频的当前播放时间
  audioRef.value.currentTime = currentTime;
};
//调整音量
const handleAudioVolume = (val) => {
  audioRef.value.volume = val / 100;
};
</script>

<style lang="scss" scoped>
.audio_right {
  width: 230px;
  height: 40px;
  display: flex;
  align-items: center;
  background: linear-gradient(to left, #2e7bff 0%, #8ee7ff 100%);
  border-radius: 4px;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  .slider_box {
    width: 160px;
    height: 4px;
    border-radius: 5px;
    background-color: #f1f1f1;
    flex: 1;
    margin: 0 8px 4px;
  }
  .audio_icon {
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    cursor: pointer;
  }
  .audio_time {
    color: #f1f1f1;
    overflow: hidden;
    font-size: 12px;
    position: absolute;
    bottom: 3px;
    left: 80px;
    .audio_total {
      float: right;
    }
    .audio_current {
      float: left;
    }
  }
}
.volume {
  position: relative;
  .volume_progress {
    width: 32px;
    height: 140px;
    position: absolute;
    top: -142px;
    right: -4px;
  }
  .volume_bar {
    background: #fff;
    border-radius: 4px;
  }
  .volume_icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.el-slider__button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider_box,
.volume_bar {
  .el-slider__button {
    width: 8px;
    height: 8px;
    border: none;
  }
  .el-slider__bar {
    background: #00db15;
  }
}
.slider_box {
  .el-slider__button-wrapper {
    width: 8px;
  }
}
.volume_bar {
  .el-slider__runway {
    margin: 0 14px !important;
  }
}
</style>

在父组件内引用自定义组件audioPlayer.vue

<template>
  <AudioPlayer :audioUrl="ttsAudioUrl" :isPauseTtsAudio="isPauseTtsAudio"></AudioPlayer>
</template>
<script setup>
import AudioPlayer from "../components/audioPlayer.vue";
</script>

效果图:
element 音频,音视频,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-734900.html

到了这里,关于vue3 + Element Plus自定义音频audio样式及控件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+element Plus+ts 自定义主题色,以及生成主题色各种透明度

    目录 思路  安装css-color-function【接收一个颜色值,生成不同的透明度】 获取后台配置的主题色或者使用ColorPicker修改主题色  最终结果如下 本篇文章的主体思路是从element Plus官网引申而来。结合了我以前用vue2+element-ui配置主题色生成透明度(light-1至linght-9)的方法。 utils/

    2024年02月21日
    浏览(51)
  • element-plus 表格-自定义样式实现

    效果如下 代码如下

    2024年02月09日
    浏览(46)
  • Vue中使用element-plus中的el-dialog定义弹窗-内部样式修改-v-model实现-demo

    .el-dialog.no-code-dialog 添加自己定义的类名用于区分其他组件

    2024年02月11日
    浏览(56)
  • vue3和element plus踩坑

    1.有说vue版本有两个,但检查之后发现只有一个,且为vue3的版本 2.也有说是因为命名的问题,组件名和页面名一致 最后发现是因为 在main.js里面引入element plus 使用这种use方式会报错,虽然也不知道为什么 改为以下这种写法之后就没有报错了 但改为这种写法却引入失败 使用组

    2024年02月11日
    浏览(37)
  • VUE3 修改element ui 的样式

    之前修改antd组件库的样式,可以用global修改 但是在修改element ui的样式,用global竟然不生效诶。 如何修改element ui 的样式? 答:用样式穿透 CSS 样式穿透的三种方式 1. 2./deep/ 3.::v-deep 我参与的项目中用的是scss 示例:修改element ui table表的样式 使 element ui的表格变成这样子 注意

    2024年02月09日
    浏览(48)
  • vue3使用element-plus

    element-ui 是配合 vue2 使用,element-plus 是配置 vue3 使用的 1. 包管理器的方式 如果是使用 webpack 或者 vite 打包工具新建的项目 2. 浏览器直接导入 直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus 1. 导入全部组件且注册所有的图标 声明使用 ElementPl

    2024年02月08日
    浏览(80)
  • 【vue3项目初始化配置】vue3 + element plus

    项目初始化是开发过程中很重要的一个环节,本篇博客带大家从零开始创建并初始化一个vue3项目,文章详细介绍了每个步骤,希望能帮助刚接触开发的小伙伴。 目录 一.创建项目 二.安装插件  ​编辑 ​编辑三.安装依赖 ​编辑 ​编辑四.配置项目 配置vu.config.js文件  配置

    2024年01月18日
    浏览(72)
  • Vue3导入Element-plus方法

    先引入依赖 main.js中要引入两个依赖 然后 这个东西 我们最好还是挂载vue上 所以 还是 然后 我们可以在组件上试一下用一个ElementUi的表格组件 参考代码如下 运行结果如下 也是没有任何问题

    2024年02月06日
    浏览(56)
  • vue3 Element Plus 基于webstorm练习

    vue是前端框架,Elemen是组件库。前端框架和组件库的区别与联系 脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言, 浏览器是它的解析器角色。而对于需要独立运行的js,nodejs就是一个解析器。 npm 是 Node Package Man

    2024年02月19日
    浏览(62)
  • 【vue3.0 引入Element Plus步骤与使用】

    Element Plus 是一个基于 Vue 3.0 的 UI 组件库,它是 Element UI 的升级版。Element Plus 的设计理念是简单、易用、高效,具有良好的可定制性和扩展性。下面是使用 Element Plus 的步骤: 1. 安装 Element Plus 可以通过 npm 或者 yarn 安装 Element Plus。 使用 npm 安装: 使用 yarn 安装: 2. 引入 E

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包