audio最简单原始的播放、暂停、停止、静音、音量大小控制的功能，注意某些浏览器会有权限无法自动播放噢（video也会如此）
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>audio声音控制</title>

<script type="text/javascript">

//注意某些浏览器有权限无法自动播放

//声音控制

var my_audio={

    obj:null,

    is_auto_play:false,

    is_loop:false,

    set:function(a){

        var self=this;

        self.obj=new Audio(a.url);

        if(a.auto){

            self.is_auto_play=true;

            self.play();

        }

        if(a.loop){

            self.is_loop=true;

        }

    },

    play:function(){

        var self=this;

        self.obj.play();

        if(self.is_loop){

            self.obj.onended = function() {

                self.play();

            };

        }

    },

    pause:function(){

        var self=this;

        self.obj.pause();

    },

    stop:function(){

        var self=this;

        self.obj.pause();

        self.obj.currentTime = 0.0;

    },

    muted:function(){

        var self=this;

        self.obj.muted ? self.obj.muted = false : self.obj.muted = true;

    },

    volume_add:function(){

        var self=this;

        self.obj.volume = self.obj.volume + 0.1;

    },

    volume_minus:function(){

        var self=this;

        self.obj.volume = self.obj.volume - 0.1;

    },

    init:function(a){

        var c = function(s) {

            var r={};

            for (var k in s) {

                r[k] = typeof s[k]==="object" ? c(s[k]) : s[k];

            }

            return r;

        }

        var self =  c(my_audio);

        self.set(a);

        return self;

    }

}

var audio_bg=my_audio.init({url:"video/bg.mp3",auto:true});

var audio_gift=my_audio.init({url:"video/gift.mp3",loop:true});

var audio_bomb=my_audio.init({url:"video/bomb.mp3"});

</script>

</head>

<body>

<br><br><br><br><br>

<a href="javascript:audio_bg.play();">播放背景</a>

<a href="javascript:audio_bg.pause();">暂停背景</a>

<a href="javascript:audio_bg.stop();">停止背景</a>

<a href="javascript:audio_bg.muted();">静音背景</a>

<a href="javascript:audio_bg.volume_add();">增加背景音</a>

<a href="javascript:audio_bg.volume_minus();">减少背景音</a>

<br><br><br><br><br>

<a href="javascript:audio_gift.play();">播放gift</a>

<a href="javascript:audio_gift.pause();">暂停gift</a>

<a href="javascript:audio_gift.stop();">停止gift</a>

<a href="javascript:audio_gift.muted();">静音gift</a>

<a href="javascript:audio_gift.volume_add();">增加gift音</a>

<a href="javascript:audio_gift.volume_minus();">减少gift音</a>

<br><br><br><br><br>

<a href="javascript:audio_bomb.play();">播放bomb</a>

<a href="javascript:audio_bomb.pause();">暂停bomb</a>

<a href="javascript:audio_bomb.stop();">停止bomb</a>

<a href="javascript:audio_bomb.muted();">静音bomb</a>

<a href="javascript:audio_bomb.volume_add();">增加bomb音</a>

<a href="javascript:audio_bomb.volume_minus();">减少bomb音</a>

</body>

</html>

audio 基本功能实现（audio停止播放,audio如何静音,audio音量控制等）的更多相关文章

  1. JavaScript多个音频audio标签，点击其中一个播放时，其他的停止播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. audio autoplay 是pause 不会停止播放

    $("#alarmWav").append( $('<audio id="alarmAudio" autoplay loop src="../j ...

  3. 原创: 做一款属于自己风格的音乐播放器 (HTML5的Audio新特性)

    灵感的由来是前些天看到了博: http://www.cnblogs.com/li-cheng 的首页有一个很漂亮的播放器,感觉很不错,是用Flex做的Flash播放器. 于是我也便想到了,自己也来来弄 ...

  4. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

  5. JS指定音频audio在某个时间点进行播放，获取当前音频audio的长度，音频时长格式转化

    前言: 今天接到一个需求,需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟,我要让它默认从第2秒的时候开始播放),这里当然想到了H5中的audio ...

  6. JavaScript一个页面中有多个audio标签，其中一个播放结束后自动播放下一个，audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5视频播放练习：鼠标经过视频播放，鼠标移除停止播放，再次经过继续播放。

    随着HTML5的广泛应用,在一些网站中,经常看到有些预览的短视频预览,鼠标经过就会播放,移除就会停止播放,再次移进去就会继续播放. 自己也研究着做一个比较简单的类似的练习. 视频可以自己到包图网下载, ...

  8. iOS WKWebView 退出后停止播放音频/视频

    带有<video>或者<audio>标签的H5网页在播放音频视频时,退出webview后不会自动停止播放,手动处理一下. 1.注入使网页停止音频.视频播放的JS代码(Swift ...

  9. swiper中有视频时，滑动停止后视频停止播放

    我们经常能够看到在图片轮播中,穿插着视频的播放,如下图为淘宝的一个产品轮播图,放个视频能够让顾客对产品有个更全面的认识. 我们可以用swiper实现这个功能.用法就跟放图片一样,只是这里把图片换成视频 ...

随机推荐

  1. 从零开始，DIY一个jQuery（1）

    从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途,在整个系列的实践中,我们会把 jQuery 的主要功能模块都了解和实现一遍. 这会是一段很长的历程,但也会很有意思 —— 作为前端领域的 ...

  2. Hadoop1 Centos伪分布式部署

    前言:       毕业两年了,之前的工作一直没有接触过大数据的东西,对hadoop等比较陌生,所以最近开始学习了.对于我这样第一次学的人,过程还是充满了很多疑惑和不解的,不过我采取的策略是还是先让环 ...

  3. [译] 在Web API 2 中实现带JSON的Patch请求

    原文链接:The Patch Verb in Web API 2 with JSON 我想在.NET4.6 Web API 2 项目中使用Patch更新一个大对象中的某个字断,这才意识到我以前都没有用 ...

  4. H5图片压缩与上传

    接到需求,问前端是否可以压缩图片?因为有的图片太大,传到服务器上再压缩太慢了.意识里没有这么玩过,早上老大丢来一个知乎链接,一看,原来前辈们已经用canvas实现了(为自己的见识羞愧3秒钟,再马上开干 ...

  5. Electron 不完全快速手册

    Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   L ...

  6. ABP(现代ASP.NET样板开发框架)系列之13、ABP领域层——数据过滤器（Data filters）

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之13.ABP领域层——数据过滤器(Data filters) ABP是“ASP.NET Boilerplate P ...

  7. C# OracleDBhelper

    引用 using System.Configuration;using System.Data.OracleClient; 连接字符串 <connectionStrings> <ad ...

  8. .NetCore之EF跳过的坑

    我在网上看到很多.netCore的信息,就动手自己写一个例子测试哈,但是想不到其中这么多坑: 1.首先.netCore和EF的安装就不用多说了,网上有很多的讲解可以跟着一步一步的下载和安装,但是需要注 ...

  9. 缩放因子和UI设计

    一.PPI 1.像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目. 根据勾股定理(直角三角形两边为a和b,斜边为c, ...

  10. spring帝国-开篇

    spring简介: spring是一个开源框架,spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Dev ...