Mv-audio-player NPM

Mv Audio Player

简介

感动科技有限公司 智慧交通研究中心精心打造了一款音频播放组件，该组件基于HTML5的 <audio>标签进行了深度定制，专为智慧交通系统设计。我们的组件不仅支持多种音频格式，还具备以下用户友好的功能：

单曲循环 ：用户可以轻松设置单曲循环，确保重要信息反复播放，加深记忆。
快进10秒 ：快速跳过不感兴趣的部分，直接进入关键内容。
快退10秒 ：轻松回溯，不错过任何细节。
停止与静音 ：一键停止播放或静音，方便用户根据需要灵活控制音频播放。

安装与使用

1. 安装

npm install mv-audio-player

# or

yarn add mv-audio-player

2. 使用

在程序执行入口 main.js 注册组件

// 引入 mv-audio-player

import MvAudioPlayer from "mv-audio-player";


// 引入样式文件

import "../node_modules/mv-audio-player/dist/style.css"; 


// 注册使用

Vue.use(MvAudioPlayer);

3. 组件示例

<template>

  <AudioPlayer

    :audioSource="audioSource"

    :iconColor="iconColor"

    :progressColor="progressColor"

    :handleColor="handleColor"

    :thumbBackground="thumbBackground"

    :playerWidth="playerWidth"

    :playerHeight="playerHeight"

    :playerBg="playerBg"

  />

</template>


<script setup>

import { ref } from "vue";

import myAudio from "./Your audio address.mp3";


// 音频文件

const audioSource = ref(myAudio);


// 图标按钮颜色

const iconColor = ref("#8FABC1");


// 进度条颜色

const progressColor = ref("#8FABC1");


// 进度条按钮颜色

const handleColor = ref("#8FABC1");


// 音量圆钮颜色

const thumbBackground = ref("#8FABC1");


// 播放器区域背景颜色

const playerBg = ref("#8FABC1");


// 播放器区域宽度

const playerWidth = ref("47.65vw");


// 播放器区域高度

const playerHeight = ref("15.46vh");

</script>