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

您可能感兴趣的内容

  • Freeplane新手入门_免费思维导图制作工具

    Freeplane新手入门 官方网址:https://www.freeplane.org/ 简介描述:免费思维导图制作工具 “Freeplane”是一款免费且功能强大的思维导图制作…

    2020/03/11
  • 读懂Base64编码入门指南_编码新手入门

    我们知道一个字节可表示的范围是 0 ~ 255(十六进制:0x00 ~ 0xFF), 其中 ASCII 值的范围为 0 ~ 127(十六进制:0x00 ~ 0x7F);而超过 ASCII 范围的 128~255(十六进制:0x80 ~ 0xFF)之间的值是不可见字符。ASCII(American Standard Code for Information I

    2020/03/20
  • mpvue开发微信小程序基础知识指南教程_小程序入门基础知识

    一、mpvue简介mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。 二、mpvue快速入门① 通过脚手架引入m

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

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

    2020/03/10
  • minimal-mistakes小白攻略_一个灵活的两列Jekyll主题

    minimal-mistakes小白攻略 官方网址:https://mmistakes.github.io/minimal-mistakes/ GitHub:https://git…

    2020/03/06
  • ZeroTier菜鸟教程_免费开源虚拟局域网架设工具

    ZeroTier菜鸟教程 官方网址:https://www.zerotier.com/ 简介描述:免费开源虚拟局域网架设工具 「ZeroTier」是一个通过单一系统提供的局域网穿透…

    2020/03/11
  • javascript如何判断复选框是否选中?菜鸟攻略_复选框入门基础

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言。复选框对象具有一个checked属性,如果属性值等于true,那么说明选中,如果等于false,则说明没选中。利用javascript实现判断checkbox复选框是否被选中:<!

    2020/03/20
  • NodeJS如何充分利用多核CPU的资源使用指南_资源小白指南

    介绍单个 Node.js 程序的实例仅在一个线程上运行,因此无法充分利用 CPU 的多核系统。有时你可能需要启动 Node.js 进程集群来利用本地计算机或生产服务器上的每个 CPU 内核。在处理 API 或基于 ExpressJS 的HTTP服务器时,这个问题尤其重要。幸运的是,Node.js 有一个名为 Cluster 的核心模块,它能够帮助我们在 CP

    2020/03/24
  • 10分钟快速了解 React 基础基础入门_react指南攻略

    如果你还不会 React,希望本文可以帮你快速了解 React.js 的基础知识。创建项目使用 create-react-app 工具快速创建 React SPA。# 创建项目
    yarn create react-app my-appcd my-app# 开发模式下运行程序
    yarn start项目初始结构:my-app/README.mdnode_modu

    2020/03/26
  • React中Context基础知识_组件入门知识

    何时使用contextContext 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。// Context 可以让我们无须明确地传遍每一个组件,就能将值深入传递进组件树。
    // 为当前的 theme 创建一个 context(“light”为默认值)。
    const ThemeContext = React.cre

    2020/03/30
  • JavaScript 构造函数的继承小白帮助_继承小白指南

    JavaScript 构造函数的继承小白帮助 JavaScript 构造函数的继承 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式:接口继承和实…

    2020/03/19
  • javascript不可变性是什么?菜鸟教程_js知识指南攻略

    不可变性即某个变量在进行了某个操作之后,其本身没有发生变化,比如对于字符串而言,对字符串的任何操作都会改变字符串本身的值,而是在字符串的基础上复制出来一个然后再改变,这样我们就说是不可变的。实现对象不可变性的几种方法:1. 对象常量要使对象的某个属性为常量(即不可修改,不可删除,不可重新定义)可以按照上面讲的使用Object.defineProperty方法

    2020/03/20
  • 几道面试题来看JavaScript执行机制基础知识入门_机制小白知识

    前面的话根据 JavaScript 的运行环境,锁定它为单线程,任务需要排队执行,如果网站资源比较大,这样会导致浏览器加载会很慢,但实际上并没有,大家肯定立刻想到了同步和异步。所谓的同步和异步也是在排队,只是排队的地方不同。同步和异步同步任务进入主线程排队,异步任务进入事件队列中排队同步任务和异步任务进入到不同的队列中,也就是上面讲的在不同地方排队。同步任务

    2020/03/20
  • Angular中实现文件转BASE64基础指南_base64使用教程

    这是一个so easy的问题,主要是记录一下angular 的模板变量的使用和组件中匿名方法 ,箭头方法使用的区别代码模板文件 <input type="file" style="display: none" (change)=

    2020/03/22
  • 清除浮动的4种方式使用帮助_浮动菜鸟指南

    清除浮动:根据情况需要来清楚浮动 。清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。1.、额外标签法 给浮动盒子的后面添加一个新的div2、overflow:hidden 触发了bfc模式,就不用清除浮动了 bfc模式。CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC:根元素float的值不为noneoverflow的值不为visibl

    2020/03/29
  • Js数学对象Math新手入门_对象指南教程

    写在前面:Javascript 中Math和其他对象不同,它具有数学常数和函数的属性和方法。因为它的属性是数学常数,所以不能被改变(可以进行赋值操作,但最后值不变)。Math的方法就是普通函数,调用他们直接用Math.method即可,而无需使用new关键字创造它的实例。JS中的其他对象也有类似这样的方法,但那只占他们的一小部分,而Math的方法全部都是这样

    2020/03/26