javascript如何控制音频音量?指南攻略_音频基础知识教程

JavaScript中可以通过Audio对象的volume属性来控制音频音量。volume属性设置或返回音频的音量,从0.0(静音)到1.0(最大声)。JavaScript控制音频音量实现代码如下:

<meta name="viewport" content=

javascript如何控制音频音量?指南攻略

JavaScript中可以通过Audio对象的volume属性来控制音频音量。volume属性设置或返回音频的音量,从0.0(静音)到1.0(最大声)。

javascript如何控制音频音量?指南攻略_音频基础知识教程

JavaScript控制音频音量实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div>
      <audio id="audio" controls  src="http://m10.music.126.net/20170719161110/
      02863ba74071062bce6dd56bf5907797/ymusic/450e/0b69/b118/e3a5be41869989ca3723c8cca2bf82ad.mp3">
            
        </audio>
        <button id="down">↓</button>
        <button id="up">↑</button>
    </div>
</body>
<script>
    $(function(){
        let vol = $('#audio')[0].volume;
        $('#audio').on('canplay',function(){
            this.play()
        });
        $('#down').click(function(){
            console.log( vol)
            vol =vol>0?(vol*10 -1)/10:0;
            $('#audio')[0].volume = vol;
        })
          $('#up').click(function(){
          console.log( vol)
            vol =vol<1?(vol*10 +1)/10:1;
            $('#audio')[0].volume = vol;
        })
    })
</script>
</html>

Audio 对象

Audio 对象代表着 HTML <audio> 元素。

访问 Audio 对象

你可以使用getElementById()来访问 <audio> 元素:

var x = document.getElementById("myAudio");

创建 Audio 对象

你可以使用document.createElement()方法创建 <audio> 元素:

var x = document.createElement("AUDIO");

Audio volume 属性

volume 属性设置或返回音频的音量,从 0.0 (静音) 到 1.0 (最大声)。

语法

返回 volume 属性:

audioObject.volume

设置 volume 属性:

audioObject.volume=number

属性值:

volumevalue:规定音频的当前音量。必须是介于 0.0 与 1.0 之间的数字。

海计划公众号
(0)
上一篇 2020/03/22 08:49
下一篇 2020/03/22 08:49

您可能感兴趣的内容

  • vue proxy代理跨域菜鸟教程_代理小白攻略

    target:”http://user.zhangpeiyue.com”,//访问的服务器地址
    changeOrigin:true,//true为开启代理
    pathRewrite:{‘^/user’: ‘/’//路径的替换规则
    }changeOrigin的属性值为一个布尔值,如果设置为true,那么本地会虚拟一个NODE服务端接收你的请求并代你发送该请求(中

    2020/03/24
  • 浏览器HTML自带懒加载技术指南攻略_加载入门攻略

    对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行:1、加载初始的 HTML 响应内容2、加载懒加载库3、加载图片假如浏览器能直接支持懒加载,那是最好的,这一想法也不是不可能哦!从Chrome 75开始,我们可以通过切换两个开关来手动启用懒加载功能,可能最新的Chrome将会默认开启懒加载功能了,就是

    2020/03/24
  • 程序员如何在百忙之中不走岔路,不白忙!使用帮助_程序员入门基础教程

    程序员忙,似乎是个公论,有些程序员甚至会认为,不忙的程序员无法快速地进步,从而会落伍。或者说,不忙的程序员有可能被公司末尾淘汰掉。对此,一直危机感很重的我深以为然。因为,我见过不少得过且过的的程序员工资明显低于同等条件下的平均水平,我更见过更多忙成狗的程序员,因为不知道在忙什么以及为什么忙,所以进步很慢,这真就叫做白忙了。 不论程序员对“忙”持有什么态度,

    2020/04/05
  • 版本管理Git和SVN的介绍及其优缺点入门百科_svn小白常识

    版本管理概念:版本管理是软件配置管理的基础,它管理并保护开发者的软件资源。好处:可以保留我们的历史版本,在代码开发到一半的时候,不至于无故丢失,还可以查看BUG的来龙去脉。版本管理种类:集中式的版本管理和分布式的版本管理。实现的控制软件分别有SVN和Git。 了解了版本管理的概念那就进入主题,讲讲SVN和Git SVN概念:SVN是Subversion的简

    2020/03/24
  • 在原生 React Native 应用中使用 Expo API使用指南_api基础知识

    注: 本文最初于 2019 年 2 月 28 日发布,随后于 2019 年 3 月 14 日更新,以反映 Workflow 的改进。从今天开始,你可以在任何 React Native 应用程序中使用尽可能少或尽可能多的 Expo SDK。 我们已经花了很多时间构建和维护这些包含原生应用特性的跨平台 API,我们很高兴最终实现了向整个 React Native

    2020/03/30
  • vue指令v-html中使用过滤器filters功能小白帮助_过滤器入门攻略

    Vue 2.0 不再支持在 v-html 中使用过滤器解决方法:1:全局方法(推荐)2:computed 属性3:$options.filters(推荐)1:使用全局方法:可以在 Vue 上定义全局方法:Vue.prototype.msg = function(msg){return msg.replace(”\n”,”
    “)
    };然后所有地方上都可以

    2020/03/24
  • colorable使用攻略_一款配色工具

    colorable使用攻略 官方网址:https://colorable.jxnblk.com GitHub:https://github.com/jxnblk/colorable…

    2020/03/06
  • background-attachement视差滚动指南教程_滚动入门教程

    之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。。。概述:滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。属性:background-attachment ,决定背景在视图中形态(固定、随区块固定),需配合background-image使用。值:backgro

    2020/03/29
  • 网站建设如何选择优质服务器主机?菜鸟指南_服务器小白知识

    我们在建设网站过程中,一定无法避免选择合适的服务器空间,所谓的虚拟主机就是在网络服务器上分出一定的磁盘空间,供用户放置站点文件,应用组件程序等,把一台运行在互联网上的服务器划分成多个虚拟的服务器,每个虚拟主机都有独立的域名和完整的internet服务器。但是到底如何选择服务器呢,很多用户不知道该如何做出选择,今天我们就介绍一下选择虚拟主机需要注意的几个方面。

    2020/03/29
  • 彻底理解浏览器缓存机制小白知识_缓存零基础入门

    概述浏览器的缓存机制也就是我们说的 HTTP 缓存机制,其机制是根据 HTTP 报文的缓存标示进行的。所以在分析浏览器缓存之前,我们先使用图文简单介绍一下 HTTP 报文,HTTP 报文分为两种:HTTP 请求(Request)报文。报文格式为:请求行。HTTP 头(通用信息头,请求头,实体头)。请求报文主体(只有 POST 才有报文主体)。HTTP 响应(

    2020/03/22
  • 微信小程序开发注意指南和优化实践菜鸟指南_小程序菜鸟知识

    前言转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。其中培训视频以上传到B站中,欢迎小伙伴们来围观评论^ ^ https://www.bilibili.com/video/av56083647一、WXML不要换行写,有空格不行微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行

    2020/03/29
  • cash基础知识_现代浏览器(IE10 +)的一种jQuery替代品

    cash基础知识 GitHub:https://github.com/kenwheeler/cash 简介描述:现代浏览器(IE10 +)的一种jQuery替代品 Cash对于浏览…

    2020/03/07
  • 中华珍宝馆基础知识入门_在线观看高清中国书画作品

    中华珍宝馆基础知识入门 官方网址:http://ltfc.net/ 简介描述:在线观看高清中国书画作品 展示高清晰度历代珍贵书画作品,大部分藏品为高清图,与原作等大。非常适合书画鉴…

    2020/03/10
  • mysql大批量插入数据四种方法使用攻略_数据基础教程

    方法一:循环插入这个也是最普通的方式,如果数据量不是很大,可以使用,但是每次都要消耗连接数据库的资源。大致思维如下(我这里写伪代码,具体编写可以结合自己的业务逻辑或者框架语法编写)for($i=1;$i

    2020/03/29
  • 17ce小白教程_提供专业权威的实时网站测速服务

    17ce小白教程 官方网址:http://www.17ce.com/ 简介描述:提供专业权威的实时网站测速服务 国内最专业最权威的实时网站测速、服务器监控、网络监控、IDC质量评测…

    2020/03/06
  • Web前端发展史使用说明_前端入门知识

    前端到底是个啥前端其实是个很大的范畴。我这里只针对 web 开发的前端而言(下文统称前端)。简单点说,针对浏览器的开发,浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成:HTML(超文本标记语言)、CSS(级联样式表)、JavaScript。前端发展历程前端也算是经历了一个比较漫长的发展过程,大致历程可

    2020/03/24