支持vue3.0 中的音频插件都有哪些？

Posted 2023-04-23

vue3.0中可使用的音频播放插件，有哪些

axios
基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
功能特性
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击

安装
使用 bower:
$ bower install axios

使用 npm:
$ npm install axios

例子
发送一个 GET 请求
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response)
console.log(response);
)
.catch(function (response)
console.log(response);
);// Optionally the request above could also be done as
axios.get('/user',
params:
ID: 12345

)
.then(function (response)
console.log(response);
)
.catch(function (response)
console.log(response);
);发送一个 POST 请求
axios.post('/user',
firstName: 'Fred',
lastName: 'Flintstone'
)
.then(function (response)
console.log(response);
)
.catch(function (response)
console.log(response);
);发送多个并发请求
function getUserAccount()
return axios.get('/user/12345');

function getUserPermissions()
return axios.get('/user/12345/permissions');

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms)
// Both requests are now complete
));axios API
可以通过给 axios传递对应的参数来定制请求：
axios(config)
// Send a POST requestaxios( method: 'post', url: '/user/12345',
data: firstName: 'Fred', lastName: 'Flintstone' );
axios(url[, config])
// Sned a GET request (default method)
axios('/user/12345');

请求方法别名
为方便起见，我们为所有支持的请求方法都提供了别名
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])注意
当使用别名方法时， url、 method 和 data 属性不需要在 config 参数里面指定。
并发
处理并发请求的帮助方法
axios.all(iterable)
axios.spread(callback)
创建一个实例
你可以用自定义配置创建一个新的 axios 实例。
axios.create([config])
var instance = axios.create(
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: 'X-Custom-Header': 'foobar'
);实例方法
所有可用的实例方法都列在下面了，指定的配置将会和该实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])请求配置
下面是可用的请求配置项，只有 url 是必需的。如果没有指定 method ，默认的请求方法是 GET。

// `url` is the server URL that will be used for the request
url: '/user',
// `method` is the request method to be used when making the request
method: 'get', // default
// `baseURL` will be prepended to `url` unless `url` is absolute.
// It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
// to methods of that instance.
baseURL: 'https://some-domain.com/api/',
// `transformRequest` allows changes to the request data before it is sent to the server
// This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
// The last function in the array must return a string or an ArrayBuffer
transformRequest: [function (data)
// Do whatever you want to transform the data
return data;
],
// `transformResponse` allows changes to the response data to be made before
// it is passed to then/catch
transformResponse: [function (data)
// Do whatever you want to transform the data
return data;
],
// `headers` are custom headers to be sent
headers: 'X-Requested-With': 'XMLHttpRequest',
// `params` are the URL parameters to be sent with the request
params:
ID: 12345
,
// `paramsSerializer` is an optional function in charge of serializing `params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params)
return Qs.stringify(params, arrayFormat: 'brackets')
,
// `data` is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', and 'PATCH'
// When no `transformRequest` is set, must be a string, an ArrayBuffer or a hash
data:
firstName: 'Fred'
,
// `timeout` specifies the number of milliseconds before the request times out.
// If the request takes longer than `timeout`, the request will be aborted.
timeout: 1000,
// `withCredentials` indicates whether or not cross-site Access-Control requests
// should be made using credentials
withCredentials: false, // default
// `adapter` allows custom handling of requests which makes testing easier.
// Call `resolve` or `reject` and supply a valid response (see [response docs](#response-api)).
adapter: function (resolve, reject, config)
/* ... */
,
// `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
// This will set an `Authorization` header, overwriting any existing
// `Authorization` custom headers you have set using `headers`.
auth:
username: 'janedoe',
password: 's00pers3cret'

// `responseType` indicates the type of data that the server will respond with
// options are 'arraybuffer', 'blob', 'document', 'json', 'text'
responseType: 'json', // default
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `progress` allows handling of progress events for 'POST' and 'PUT uploads'
// as well as 'GET' downloads
progress: function(progressEvent)
// Do whatever you want with the native progress event

响应的数据结构
响应的数据包括下面的信息：

// `data` is the response that was provided by the server
data: ,
// `status` is the HTTP status code from the server response
status: 200,
// `statusText` is the HTTP status message from the server response
statusText: 'OK',
// `headers` the headers that the server responded with
headers: ,
// `config` is the config that was provided to `axios` for the request
config:
当使用 then 或者 catch 时, 你会收到下面的响应：
axios.get('/user/12345')
.then(function(response)
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
);默认配置
你可以为每一个请求指定默认配置。
全局 axios 默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';自定义实例默认配置
// Set config defaults when creating the instance
var instance = axios.create(
baseURL: 'https://api.example.com'
);
// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;配置的优先顺序
Config will be merged with an order of precedence. The order is library defaults found in lib/defaults.js, then defaults property of the instance, and finally config argument for the request. The latter will take precedence over the former. Here's an example.
// Create an instance using the config defaults provided by the library
// At this point the timeout config value is `0` as is the default for the libraryvar instance = axios.create();
// Override timeout default for the library
// Now all requests will wait 2.5 seconds before timing outinstance.defaults.timeout = 2500;
// Override timeout for this request as it's known to take a long timeinstance.get('
/longRequest', timeout: 5000);拦截器
你可以在处理 then 或 catch 之前拦截请求和响应
// 添加一个请求拦截器

axios.interceptors.request.use(function (config)
// Do something before request is sent
return config;
, function (error)
// Do something with request error
return Promise.reject(error);
);

// 添加一个响应拦截器

axios.interceptors.response.use(function (response)
// Do something with response data
return response;
, function (error)
// Do something with response error
return Promise.reject(error);
);移除一个拦截器：
var myInterceptor = axios.interceptors.request.use(function () /*...*/);
axios.interceptors.request.eject(myInterceptor);你可以给一个自定义的 axios 实例添加拦截器：
var instance = axios.create();
instance.interceptors.request.use(function () /*...*/);错误处理
axios.get('/user/12345')
.catch(function (response)
if (response instanceof Error)
// Something happened in setting up the request that triggered an Error
console.log('Error', response.message);
else
// The request was made, but the server responded with a status code
// that falls out of the range of 2xx
console.log(response.data);
console.log(response.status);
console.log(response.headers);
console.log(response.config);

);Promises
axios 依赖一个原生的 ES6 Promise 实现，如果你的浏览器环境不支持 ES6 Promises，你需要引入 polyfill 参考技术A 1、Sound Forge
是能够非常方便、直观地实现对音频文件（wav文件）以及视频文件（avi文件）中的声音部分进行各种处理，满足从最普通用户到最专业的录音师的所有用户的各种要求，所以一直是多媒体开发人员首选的音频处理软件之一。
2、WavePad Audio Editor（WavePad音频编辑器）
是适用于Windows和Mac的音频和音乐编辑器（也适用于iOS和android）。 它允许用户录制并编辑音乐、录音和其他声音。作为一个编辑器，用户可以在其中剪切、复制、粘贴、删除、插入、静音和自动修剪录音，然后在VST插件和免费音频库的支持下添加增强、归一化、均衡器、包络线、混响、回声、倒放等效果。
3、Adobe Audition
是美国Adobe Systems 公司 （前Syntrillium Software Corporation）开发的一款功能强大、效果出色的多轨录音和音频处理软件。主要用于对MIDI信号的处理加工，它具有声音录制、混音合成、编辑特效等功能。
4、GoldWave
是一个集声音编辑、播放、录制和转换的音频工具。它还可以对音频内容进行转换格式等处理。支持许多格式的音频文件，包括WAV、OGG、VOC、 IFF、AIFF、 AIFC、AU、SND、MP3、 MAT、 DWD、 SMP、 VOX、SDS、AVI、MOV、APE等音频格式。
5、格式工厂（Format Factory）
是由上海格式工厂网络有限公司创立于2008年2月，是面向全球用户的互联网软件。主打产品“格式工厂”发展至今，已经成为全球领先的视频图片等格式转换客户端。现拥有在音乐、视频、图片等领域庞大的忠实用户，在该软件行业内位于领先地位，并保持高速发展趋势。

Vue全家桶有哪些？（详细）

vue全家桶都有什么

全家桶，顾名思义，对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。
注：此文章主要讲解vue-cli脚手架开发方式，主要介绍各插件安装方法及其功能特点，不介绍各插件的具体使用方式，具体使用方式详见其他详细介绍文章。

一、vue-cli

vue-cli也叫脚手架，官方定义为Vue.js 开发的标准工具！相比scirpt标签引入，脚手架具有如下特点：
1）、功能丰富
对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。
2）、易于扩展
它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。
3）、无需 Eject
Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。
4）、CLI 之上的图形化界面
通过配套的图形化界面创建、开发和管理你的项目。
5）、即刻创建原型
用单个 Vue 文件即刻实践新的灵感。
6）、面向未来
为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

//安装完成后创建一个项目，vue ui为图形化构建，相对简单（推荐）
vue create my-project
# OR
vue ui

二、vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

1）嵌套的路由/视图表
2）模块化的、基于组件的路由配置
3）路由参数、查询、通配符
4）基于 Vue.js 过渡系统的视图过渡效果
5）细粒度的导航控制
6）带有自动激活的 CSS class 的链接
7）HTML5 历史模式或 hash 模式，在 IE9 中自动降级
8）自定义的滚动条行为

vueRouter 安装

npm install vue-router
//安装后在mainjs引入
import VueRouter from 'vue-router'

Vue.use(VueRouter)

三、vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

安装方法

npm install vuex --save

四、Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
1）从浏览器中创建 XMLHttpRequests
2）从 node.js 创建 http 请求
3）支持 Promise API
4）拦截请求和响应
5）转换请求数据和响应数据
6）取消请求
7）自动转换 JSON 数据
8）客户端支持防御 XSRF

安装方法

 npm install axios

五、搭配UI框架如：iview、vant、elementUI

iview 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本)；
vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
elementUI 是基于 Vue 2.0 桌面端中后台组件库。