html里的音频插件,html5音频播放插件
非常的小不到100行的代码,支持播放,暂停,停止,想要更多的的也没有了。
主文件是mkplayer.js
还有demo.html的示例文件
还有999.mp3音乐文件,这个自行找一个mp3文件,然后改下名字就好了
1.[代码]mkplayer.js
//mkplayer html5音频播放控件
//特点:简单,播放,暂停,停止;没有更多了
//灵活自定义:播放,暂停,停止按钮完全自行定义,只需要给mkplay,mkpause,mkstop的id即可
//足够的小:3kb
//作者:齐泽西
//邮箱:qizexi@163.com
//MKPlayer初始化函数
//audiourl 音频播放源地址
//audiotype 音频格式:默认audio/mpeg
//注1:播放按钮默认绑定'mkplay'
//注2:暂停按钮默认绑定'mkpause'
//注3:停止按钮默认绑定'mkstop'
function MKPlayer(audiourl, audiotype) {
//播放,暂停,停止控制按钮
var play = document.getElementById('mkplay');
var pause = document.getElementById('mkpause');
var stop = document.getElementById('mkstop');
//创建audio对象
var audio = document.createElement('audio');
//创建source对象
var source = document.createElement('source');
source.style.display = 'none';
source.setAttribute('src', audiourl);
if (audiotype) {
source.setAttribute('type', audiotype);
}
else {
source.setAttribute('type', 'audio/mpeg');
}
audio.appendChild(source);
//设置audio对象信息
audio.style.display = 'none';
//audio.src = audiourl;
document.body.appendChild(audio);
//获取音频的就绪状态
function getState(auObj) {
return auObj.readyState;
}
//获取音频的时常(单位:妙)
function getTimeLength(auObj) {
return auObj.duration;
}
//设置音频的播放位置
function setPlayIndex(auObj, index) {
auObj.currentTime = index;
}
//播放
play.addEventListener('click',function() {
if (getState(audio) == 0) {
return false;
}
audio.play();
return false;
}, false);
//暂停
pause.addEventListener('click', function() {
if (getState(audio) == 0) {
return false;
}
audio.pause();
return false;
}, false);
//停止
stop.addEventListener('click', function() {
if (getState(audio) == 0) {
return false;
}
setPlayIndex(audio, getTimeLength(audio));
return false;
}, false);
}
2.[文件] demo.html ~ 831B 下载(16)
HTML5 语音播放插件
div{width:100%;height:50px;line-height:50px;text-align:center;font-size:36px;}
#mkplay{background:#ccc;color:green;}
#mkpause{background:#ccc;color:yellow;}
#mkstop{background:#ccc;color:red;}
window.onload = function() {
MKPlayer('999.mp3');
}
html里的音频插件,html5音频播放插件相关推荐
- html录音并转为音频文件,HTML5音频API Web Audio
此文介绍HTML5音频API的主要框架和工作流程,因为音频处理模块很多,因此只简单介绍几种音频处理模块,并通过例子来展示效果.后续会介绍利用HTML5音频API实现的项目,欢迎大家关注,敬请期待. H ...
- 天气插件、flv播放插件
天气插件-和风天气 官网链接 在线生成插件代码 使用简单,只需注册即可:不好的地方在于不好动态更新,只能一次加载 使用API访问数据 比如获取城市id等. flv如何网页播放 xgPlayer 用起来 ...
- html5窗口播放插件,基于jQuery UI的模拟windows窗口插件
jquery-lwd是一款轻量级的基于jQueryUI的模拟windows窗口插件.该插件可以模拟windows窗口,对窗口进行最大化,最小化,拖动等操作.并提供windows2000经典主题效果.它 ...
- m3u8播放插件,谷歌浏览器m3u8播放插件
转载地址:http://www.xiaoshu168.com/php/310.html
- html5音频插件js,wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件
通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作,包括 Firefox, Chrome, Safari, Mobile S ...
- html的音频播放,HTML5 音频播放 audio
众所周知,在HTML5诞生之前网页上要播放一段视频基本都是依靠flash插件,而HTML5诞生了和标签,使得在HTML5上播放视频或者音频就像显示图片那么轻松 如果我们现在不需要使用浏览器内部的aud ...
- 主流 html5播放器,10 个最佳 HTML5 音频播放器推荐
英文原文:10 Best HTML5 Audio Players HTML5 似乎无所不能,该技术正在逐步蚕食原本属于 Flash 的市场,并逐渐成为 Web 开发中的主流技术之一. 本文为你带来 1 ...
- jquery 音频播放_10个jQuery HTML5音频播放器
jquery 音频播放 根据Buzz Angle Music的数据 ,仅在美国,2017年第一季度就消费了830亿个音频流.这比上一季度增长了61.2%. 同时,音乐销量下降了23.8%. 2017年 ...
- 10个jQuery HTML5音频播放器
根据Buzz Angle Music的数据,2017年第一季度,仅美国就消费了830亿个音频流.这比上一季度增长了61.2%. 同时,音乐销量下降了23.8%. 2017年5月8日:此热门文章已更新, ...
- 自定义音频播放器_创建自定义HTML5音频播放器
自定义音频播放器 在本教程中,我将向您介绍HTML5音频,并向您展示如何创建自己的播放器. 如果您想走捷径,请查看Envato市场上可用的现成的HTML5音频播放器 . 它使您可以从各种来源创建播放列 ...
最新文章
- 为什么有如此多的python版本
- Android——TabLayout 默认某个选项卡选中
- Abp中使用可视化的日志面板
- bootstrap 取消_学习写个网站(5)Bootstrap学习2
- 内核错误Linux,ubuntu14.04更新内核出错
- 某微型计算机指令格式如图,组成原理考试试卷
- 操作数据----DML语句
- 超 短 高精度 bign 模板
- 【路径规划】基于matlab GUI改进的DWA算法机器人动态避障路径规划【含Matlab源码 1271期】
- Web安全工具大汇聚
- [转] Node.js 服务端实践之 GraphQL 初探
- 高中数学培训高一数学提分技巧
- 解决win11/win10无法安全拔出移动硬盘的问题 - U盘无法“安全删除并弹出媒体”
- win10下如何使用linux系统
- KV存储相关基础知识
- macd java_macdev/java.md at master · pubyun/macdev · GitHub
- 大数据和人工智能到底是什么关系
- redis数据库的概述
- 手把手教你做智能手环
- DP4398:国产兼容替代CS4398立体声24位/192kHz音频解码芯片
热门文章
- python 直播源_直播源获取软件下载|直播源获取工具(斗鱼B站西瓜)下载-蛙扑下载站...
- 全国计算机考试一级在线模拟考试系统,全国计算机等级考试模拟系统全国计算机等级考试一级模拟试题和答案.doc...
- 【2.0版本】Capi文档生成帮助类,一键生成WebApi接口说明文档,方法异常处理,模拟请求接口(使用Hplus模版)
- SuperMap iDesktopX _ 高德POI数据下载
- tp3.2.3php环境要求,TP3.2.3开发手册
- 教程:GIMP中改变画布大小
- 洛谷OJ P1036 选数
- 服务器dump文件位置,dump解析入门-用VS解析dump文件进行排障
- 【Luogu3444】ORK-Ploughing(贪心)
- 计算机组成原理实验(logisim)