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. Hadoop学习笔记系列文章导航

    一.为何要学习Hadoop? 这是一个信息爆炸的时代.经过数十年的积累,很多企业都聚集了大量的数据.这些数据也是企业的核心财富之一,怎样从累积的数据里寻找价值,变废为宝炼数成金成为当务之急.但数据增长 ...

  2. 模拟实现Spring中的注解装配

    本文原创,地址为http://www.cnblogs.com/fengzheng/p/5037359.html 在Spring中,XML文件中的bean配置是实现Spring IOC的核心配置文件,在 ...

  3. JRebel Windows RegCreateKeyEx(...) returned error code 5.

    作为一个JRebel的深度用户,在win10下用JRebel的eclipse插件使用的时候遇到了如下问题: java.util.prefs.WindowsPreferences <init> ...

  4. Java-jdbc操作数据库

    如果需要访问数据库,首先要加载数据库驱动,数据库驱动只需在第一次访问数据库时加载一次.然后在每次访问数据库时创建一个Connection实例,获取数据连接,这样就可以执行操作数据库的SQL语句.最后在 ...

  5. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  6. Ubuntu-server 下Apache2 配置.htaccess 隐藏thinkPHP项目index.php

    需要开启Apache2的rewrite模块 1.打开/etc/apache2/apache2.conf 将文件中的AllowOverride None改为AllowOverride All 2.修改m ...

  7. 时间复杂度分别为 O（n）和 O（1）的删除单链表结点的方法

    有一个单链表,提供了头指针和一个结点指针,设计一个函数,在 O(1)时间内删除该结点指针指向的结点. 众所周知,链表无法随机存储,只能从头到尾去遍历整个链表,遇到目标节点之后删除之,这是最常规的思路和 ...

  8. Java多种方式动态生成doc文档

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5280272.html 本来是要在Android端生成doc的(这需求...),最后方法没有好的方法能够在An ...

  9. C#基础回顾（二）—页面值传递、重载与重写、类与结构体、装箱与拆箱

    一.前言 -孤独的路上有梦想作伴,乘风破浪- 二.页面值传递 (1)C#各页面之间可以进行数据的交换和传递,页面之间可根据获取的数据,进行各自的操作(跳转.计算等操作).为了实现多种方式的数据传递,C ...

  10. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...