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. AutoMapper(七)

    返回总目录 Null值替换 如果源类型的成员链上的属性值为Null,Null值替换允许提供一个可替换的值.下面有两个类Person和PersonInfo类,都有一个属性Title(头衔),从Perso ...

  2. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  3. SQL Server数据库损坏、检测以及简单的修复办法

    简介     在一个理想的世界中,不会存在任何数据库的损坏,就像我们不会将一些严重意外情况列入我们生活中的日常一样,而一旦这类事情发生,一定会对我们的生活造成非常显著的影响,在SQL Server中也 ...

  4. React-Native 渲染实现分析

    前言 React Native与传统的HybirdApp最大区别就是抛开WebView,使用JSC+原生组件的方式进行渲染,那么整个App启动/渲染流程又是怎样的呢? React Native启动流程 ...

  5. CSharpGL(17)重构CSharpGL

    CSharpGL(17)重构CSharpGL CSharpGL用起来我自己都觉得繁琐了,这是到了重构的时候. 下载 CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入(https ...

  6. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  7. Integer.parseInt 引发的血案

    Integer.parseInt 处理一个空字符串, 结果出错了, 程序没有注意到,搞了很久, 引发了血案啊!! 最后,终于 观察到了, 最后的部分: Caused by: java.lang.NoC ...

  8. 2. SVM线性分类器

    在一个线性分类器中,可以看到SVM形成的思路,并接触很多SVM的核心概念.用一个二维空间里仅有两类样本的分类问题来举个小例子.如图所示 和是要区分的两个类别,在二维平面中它们的样本如上图所示.中间的直 ...

  9. 压缩SWF文件大小！减少40%体积！

     使用FlashBuild作为IDE的痛苦是显著的!如果开发的项目比较大,那么卡顿.崩溃.白屏是常事,使用别的IDE开发如Sublime.FlashDevelop.IDEA等,然后再用mxmlc编译出 ...

  10. git for windows 的默认工作路径（HOME）的设置以及Git与GitHub之间的SSH加密协议

    1.安装及配置默认路径 Windows中从GitHub上面:https://git-for-windows.github.io/ 下载安装好git后(双击,改一下需要的安装路径,一路确定就好了),安装 ...