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. 物联网实验4 alljoyn物联网实验之手机局域网控制设备

    AllJoyn开源物联网协议框架,官方描述是一个能够使连接设备之间进行互操作的通用软件框架和系统服务核心集,也是一个跨制造商来创建动态近端网络的软件应用.高通已经将该项目捐赠给了一个名为“AllSee ...

  2. Visual Studio 2015 移动跨平台开发初体验

    微软换了新 CEO 后变化很大,对我们团队最有利的消息就是 Visual Studio 2015 支持移动应用跨平台开发. 还记不记得很早之前,Xamarin 宣布与微软成为合作伙伴的消息.显然,Xa ...

  3. Entity Framework 6 Recipes 2nd Edition（9-4）译->Web API 的客户端实现修改跟踪

    9-4. Web API 的客户端实现修改跟踪 问题 我们想通过客户端更新实体类,调用基于REST的Web API 服务实现把一个对象图的插入.删除和修改等数据库操作.此外, 我们想通过EF6的Cod ...

  4. Android SearchView 自定义SearchIcon和字体颜色大小

    自定义SearchView的搜索图标和字体属性相对复杂一些,记下来. 一.自定义SearchIcon 1.API版本低于21:版本小于21时,要修改SearchIcon比较复杂,需要先获取到Searc ...

  5. xamarin开发UWP元素的初始化设置顺序

    在开发xamarin的UWP平台不可避免的遇到一下坑,现记录下来,希望对后面踩坑有帮助. 一.listview的分组问题:当我们使用listview的IsGroupingEnabled=true时,如 ...

  6. mac 无法识别seagate硬盘、无法向其写入文件

    1,无法识别 Seagate 硬盘 新买的mac air Captian 10.11.6系统,连上硬盘根本不出现盘符,usb插头不要插得太深,慢慢的插入,看到硬盘白灯亮起就可以了 2,无法向 Seag ...

  7. C#设计模式-迭代器模式

    一. 迭代器(Iterator)模式 迭代器是针对集合对象而生的,对于集合对象而言,必然涉及到集合元素的添加删除操作,同时也肯定支持遍历集合元素的操作,我们此时可以把遍历操作也放在集合对象中,但这样的 ...

  8. 前端学PHP之PHP操作memcache

    × 目录 [1]安装 [2]连接 [3]增删改查[4]分布式[5]状态[6]安全[7]应用 前面的话 和访问mysql服务器类似,PHP也是作为客户端API访问memcached服务器的,所以同样需要 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（31）-MVC使用RDL报表

    系列目录 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持asp.ne ...

  10. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...