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. [PHP源码阅读]strtolower和strtoupper函数

    字符串的操作函数中,字符串的大小写转换也算是比较常用的函数,其底层实现也比较简单,下面来一探究竟. 我在github上有对PHP源码更详细的注解.感兴趣的可以围观一下,给个star.PHP5.4源码注 ...

  2. 前端构建大法 Gulp 系列 (一)：为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  3. HTPC家庭娱乐和XBOX未来发展畅想<另：创业工作机会>

    微软中国在上海举办新闻发布会,正式宣布Xbox One将于9月23日在中国开始销售,定价3699元起.这款早在2001年就发布的电视游戏机终于在经历了14年的等待后,进军中国大陆市场.此次Xbox O ...

  4. Leetcode 笔记 35 - Valid Soduko

    题目链接:Valid Sudoku | LeetCode OJ Determine if a Sudoku is valid, according to: Sudoku Puzzles - The R ...

  5. your password has expired.to log in you must change it

    今天应用挂了,log提示密码过期.客户端连接不上. 打开mysql,执行sql语句提示密码过期 执行set password=new password('123456'); 提示成功,但客户端仍然连接 ...

  6. 再次学习 java 类的编译

    做JAVA开发的都知道myeclipse, 我们在myeclipse中新建一个类,然后保存, 如何正常的话,那么在项目指定的目录(也就是项目的output目录)就会生成同名的class文件, 可是,我 ...

  7. Win10 字体模糊解决（DPI缩放禁用），设置默认输入法英文

    电脑坏了 , 换了新电脑, 但是新电脑,死活不能装win7, 装都不能装!!!郁闷了 好多地方字体模糊了,百般设置都不好看, 后来远程桌面到win2008server, 发现,在远程桌面里面居然很清晰 ...

  8. php修改

    做出一张表,点击登录后进入此表   然后多建立一个<td></td>用来增加一列操作 <h1>英雄联盟英雄表</h1> <table width= ...

  9. Python 资源大全中文版

    Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...

  10. Livecoding.tv2.5发布，增加“用户搜索引擎”功能，方便用户找到匹配的程序员

    近日,在Livecoding.tv最新发布的博客中,介绍了该平台2.5版的一系列新功能,其中的User Discovery Engine(用户搜索引擎)受到大家的欢迎.使用该引擎,可以很方便地查找在L ...