audio标签控制音量_Chrome扩展推荐:最好用的浏览器音量管家,可最高增强至六倍...

75c4cd0f17cce6c6d163414618e7b3b1.png

Volume Control

11f5228215957bccfdb3b817d29afcd6.png

今天,我们就来谈一谈这个被吐槽过无数次的Chrome浏览器音量调节的问题。

在传统的方法中,Chrome标签页的音量控制是很单一的——只能对某个网页进行静音操作。

而这款名叫Volume Control的扩展,不仅可以任意调节每个网页的音量大小,还可以让网页的音量最高增加到6倍(高达600%)。

bf4fc24c1adea46c0e4ab555f796476d.png

有时不管怎么调节系统音量,都会觉得浏览器中播放的声音不够大,那么这时候Volume Control就派上用场了。

通过声音增强器,它可以使页面音量增加至六倍。

它还能对有音频输出的标签进行快速切换和音量管理:统一显示正在播放音频的网页,并快速导航。

3329631fec61a6ed2796a05d45ea4e00.png

点击弹出菜单上的扬声器图标,则可以直接对该网页静音:

062fb0251a48a53118a54b89fca5e5d4.png

当你停留在某一网页上时,还能在扩展栏的图标上直接看到音量的具体大小:

addb15715cf9c87f4c1c240e78bc442f.png

Volume Control的设计很简单,方便实用,目前已有三万多用户,接近五星满分。

通过Volume Control,你完全可以快速轻松地控制浏览器每个标签页的声音了。

下载地址​t.cn
1. 谷歌浏览器实现自动播报语音 可以使用 HTML5 的 Web Speech API 实现自动播报语音,具体步骤如下: 1) 创建 SpeechSynthesis 实例 ```javascript const synth = window.speechSynthesis; ``` 2) 创建 SpeechSynthesisUtterance 实例 ```javascript const utterance = new SpeechSynthesisUtterance('Hello World'); ``` 这里的 `'Hello World'` 是需要播报的文本内容。 3) 设置 SpeechSynthesisUtterance 实例的属性 ```javascript utterance.lang = 'en-US'; // 播报语言 utterance.rate = 1; // 播报速度 utterance.pitch = 1; // 播报音调 utterance.volume = 1; // 播报音量 ``` 4) 调用 SpeechSynthesis 实例的 speak() 方法开始播报 ```javascript synth.speak(utterance); ``` 2. Vue中解决Chrome浏览器自动播放音频 在 Chrome 浏览器中,自动播放音频需要用户交互触发,否则会被浏览器屏蔽。解决方法如下: 1) 使用用户交互触发播放 比如在用户点击一个按钮或者进行某个操作后才播放音频。 2) 在播放前让用户进行交互 可以让用户点击一个按钮或者滑动页面时,弹出提示框,让用户授权播放音频。 3. MP3语音打包到线上 可以使用 Webpack 的 file-loader 或者 url-loader 将 MP3 文件打包到项目中,然后在代码中引用即可。 1) 安装 file-loader 或 url-loader ```shell npm install file-loader --save-dev ``` 或者 ```shell npm install url-loader --save-dev ``` 2) 在 Webpack 配置文件中添加 loader ```javascript module.exports = { module: { rules: [ { test: /\.(mp3)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'audio/' } } ] } ] } } ``` 或者 ```javascript module.exports = { module: { rules: [ { test: /\.(mp3)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name: '[name].[ext]', outputPath: 'audio/' } } ] } ] } } ``` 这里的 `test: /\.(mp3)$/` 表示匹配以 `.mp3` 结尾的文件,`outputPath` 表示打包后的文件输出路径。 3) 在代码中引用 MP3 文件 ```javascript import audio from './audio/hello.mp3'; const audioEl = new Audio(audio); audioEl.play(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值