草庐IT

【Vue-Element】好用的音频组件

feifeiyechuan 2023-04-19 原文

【Vue-Element】好用的音频组件

1、vue-audio-better

源码及Demo

个人建议将源码下载下来，修改源码（包括界面功能按钮分布，方法调用等）使用。

1.1 示例

Normal

Mini

1.2 安装

npm install vue-audio-better --save

1.3 使用

Normal


  <vue-audio
    audio-source="https://example.com/example.mp3"
  ></vue-audio>

Mini


  <mini-audio
    audio-source="https://example.com/example.mp3"
  ></mini-audio>

1.4 参数

名称类型默认值备注是否必选
widthNumber500音频组件宽度
audio-sourceString音频文件URL地址是
html5Booleanfalse是否强制使用html5音频
loopBooleanfalse播放结束后是否自动重新开始播放
preloadBooleantrue组件挂载时是否开始下载音频文件
autoplayBooleanfalse组件挂载时是否开始播放
formatsString[][]Howler.js 会自动从扩展中检测您的文件格式，但您也可以在无法提取的情况下指定格式（例如使用 SoundCloud 流）
xhrWithCredentialsBooleanfalsewithCredentials使用 Web Audio API 时是否在用于获取音频文件的 XHR 请求上启用标志（请参阅参考资料）

1.5 组件内部数据

名称类型默认值备注是否必选
playingBoolean当前是否正在播放音频
mutedBoolean音频播放是否静音
volumeNumber播放的音量0到1
rateNumber播放的速度范围从0.5-4
seekNumber播放位置
durationNumber音频的持续时间
progressNumber播放进度0-1

组件内部数据，可以通过组件直接控制，也可以修改源码更改默认值。

1.6 方法

名称参数备注
play无播放
pause无暂停播放
togglePlayback无切换播放或暂停播放
stop无停止播放
mute无静音播放
unmute无取消静音播放
toggleMute无切换静音和取消静音播放
setVolume(volume)volume设置播放音量（值介于0-1之间）
setRate(rate)rate设置播放的速率（速度）（值介于0.5-4之间）
setSeek(seek)seek设置播放的位置（值在0和duration之间）
setProgress(progress)progress设置播放进度（值在0-1之间）

2、vue-audio-visual

源码及Demo

    <av-line
      :line-width="2"
      line-color="lime"
      audio-src="/static/music.mp3"
    ></av-line>


    <av-bars
      caps-color="#FFF"
      :bar-color="['#f00', '#ff0', '#0f0']"
      canv-fill-color="#000"
      :caps-height="2"
      audio-src="/static/bach.mp3"
    ></av-bars>


    <av-circle
      :outline-width="0"
      :progress-width="5"
      :outline-meter-space="5"
      :playtime="true"
      playtime-font="18px Monaco"
      audio-src="/static/bach.mp3"
    ></av-circle>


    <av-waveform
      audio-src="/static/bar.mp3"
    ></av-waveform>


    <av-media
      :media="mediaObject"
    ></av-media>

2.1 安装

npm install --save vue-audio-visual

2.2 引用

import Vue from 'vue'
import AudioVisual from 'vue-audio-visual'

Vue.use(AudioVisual)

2.3 使用

  <av-bars
    audio-src="/static/bach.mp3">
  </av-bars>

2.4 参考

1）源码API

Vue-ElementElementtdtraudiovue.js音视频javascript

有关【Vue-Element】好用的音频组件的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  3. C/C++好用的websocket库 - 2

    IntrductionLibwebsocketsisasimple-to-use,MIT-license,pureClibraryprovidingclientandserverforhttp/1,http/2,websockets,MQTTandotherprotocolsinasecurity-minded,lightweight,configurable,scalableandflexibleway.It’seasytobuildandcross-buildviacmakeandissuitablefortasksfromembeddedRTOSthroughmasscloudservi

  4. micropython复现经典单片机项目（二）可视化音频 频谱解析（基本搞定） - 2

    本人是音乐爱好者，从小就特别喜欢那个随着音乐跳动的方框效果，就是这个：arduino上一大把对，我忍你很久了，我就想用mpy做，全网没有，行我自己研究。果然兴趣是最好的老师，我之前有篇博客专门讲音频，有兴趣的可以回顾一下。提到可视化频谱，必然绕不开fft，大学学过这玩意，当时一心玩，老师讲的一个字都么听进去，网上教程简略扫了一下，大该就是把时域转频域的工具，我大mpy居然没有fft函数，奶奶的，先放着。音频信息如何收集？第一种傻瓜式的ADC，模拟转数字，原始粗暴，第二种，I2S库，我之前博客有讲过，数据是PCM编码。然后又去学PCM编码，一学豁然开朗，舒服，以代码为例：audio_in=I2S

  5. vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2

    平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  6. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：

  7. ruby - 绕过 Element 的方法无法滚动到 View 中 - Watir-webdriver with Ruby - 2

    因此，我们的页面中有以下代码:OnOff这是2个单选按钮。'开和关'。“关闭”是默认值。使用Watir-webdriver和Ruby，我们想要选择“打开”单选按钮。我们这样做:browser.radio(:id=>"HasRegistration_true").set但在这样做时，我们得到以下错误:`WebElement.clickElement':Elementcannotbescrolledintoview:[objectHTMLInputElement](Selenium::WebDriver::Error::MoveTargetOutOfBoundsError)我们知道Sele

  8. Android Studio开发之使用内容组件Content获取通讯信息讲解及实战（附源码 包括添加手机联系人和发短信） - 2

    运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中，普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据，比如查看联系人，短信，通话记录等等，以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置 下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息，然后查询联系人号码，再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid

  9. Vue3的新特性 - 2

    Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工

  10. 解决台式机麦克风不可用问题，只有音频输出，无音频输入 - 2

    解决台式机麦克风不可用问题戴尔灵越3880最近因为需要开线上会议，发现戴尔台式机音频只有输出没有输入，也就是只能听见声音，无法输入声音。先后尝试了各种驱动安装更新之类的调试，无果。之后通过戴尔支持解决~这里多说一句，专业的就是专业，问题描述过去，直接给了解决方案，可能是他们遇到的相似问题比较多了，但也告诉我们，有些时候是可以通过这些官方服务解决问题的，比起自己折腾效率要高很多。那就记录一下吧~问题描述：电脑只能输出声音，不能输入声音。1、前提需要准备一只带麦克风的耳机，将耳机插入面板。2、先确定是否可以听到声音，可以通过播放歌曲或者视频。3、然后确认麦克风是否可用，可以通过调用win自带麦克风

随机推荐