Html音频播放代码
页面代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--media=print 这个属性可以在打印时有效-->
<title>音频播放</title>
<style type="text/css">
.audio-wrapper {
background-color: #fcfcfc;
margin: 10px auto;
max-width: 670px;
height: 70px;
border: 1px solid #e0e0e0;
} .audio-left {
float: left;
text-align: center;
width: 18%;
height: 100%;
} .audio-left img {
width: 40px;
position: relative;
top: 15px;
margin: 0;
display: initial; /* 解除与app的样式冲突 */
cursor: pointer;
} .audio-right {
margin-right: 2%;
float: right;
width: 80%;
height: 100%;
} .audio-right p {
font-size: 15px;
/*height: 35%;*/
height: 20%;
margin: 8px 0;
/* 歌曲名称只显示在一行，超出部分显示为省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 243px; /* 要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
} .progress-bar-bg {
background-color: #d9d9d9;
position: relative;
height: 2px;
cursor: pointer;
} .progress-bar {
background-color: #649fec;
width: 0;
height: 2px;
} .progress-bar-bg span {
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #3e87e8;
position: absolute;
left: 0;
top: 50%;
margin-top: -5px;
margin-left: -5px;
cursor: pointer;
} .audio-time {
overflow: hidden;
margin-top: -1px;
} .audio-length-total {
float: right;
font-size: 12px;
margin-top: 5px;
} .audio-length-current {
float: left;
font-size: 12px;
margin-top: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="audio-wrapper">
<audio>
<source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mp3">
</audio>
<div class="audio-left"><img id="audioPlayer" src="play.png" /></div>
<div class="audio-right">
<p style="max-width: 536px;"><!--Beta-B_Kan R. Gao.mp3--></p>
<div class="progress-bar-bg" id="progressBarBg">
<span id="progressDot"></span>
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total">01:06</span></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// 控制音频文件名显示宽度
var maxW = $('.audio-right').width();
$('.audio-right p').css({
"max-width": maxW
});
initAudioEvent();
});
/**
* 初始化音频控制事件
*/
function initAudioEvent() {
var audio = $('audio')[0];
// 点击播放/暂停图片时，控制音乐的播放与暂停
$('#audioPlayer').click(function () {
// 监听音频播放时间并更新进度条
audio.addEventListener('timeupdate', function () {
updateProgress(audio);
}, false);
// 监听播放完成事件
audio.addEventListener('ended', function () {
audioEnded();
}, false);
// 改变播放/暂停图片
if (audio.paused) {
// 开始播放当前点击的音频
audio.play();
$('#audioPlayer').attr('src', 'pause.png');
} else {
audio.pause();
$('#audioPlayer').attr('src', 'play.png');
}
});
// 点击进度条跳到指定点播放
// PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
$('#progressBarBg').on('mousedown', function (e) {
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
if (!audio.paused || audio.currentTime != 0) {
var pgsWidth = $('.progress-bar-bg').width();
var rate = e.offsetX / pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress(audio);
}
});
var dot = document.getElementById('progressDot');
// 鼠标拖动进度点时可以调节进度
// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
// 鼠标按下时
dot.onmousedown = function (e) {
if (!audio.paused || audio.currentTime != 0) {
var oriLeft = dot.offsetLeft;
var mouseX = e.clientX;
var maxLeft = oriLeft; // 向左最大可拖动距离
var maxRight = document.getElementById('progressBarBg0').offsetWidth - oriLeft; // 向右最大可拖动距离
// 禁止默认的选中事件（避免鼠标拖拽进度点的时候选中文字）
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
// 禁止事件冒泡
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
// 开始拖动
document.onmousemove = function (e) {
var length = e.clientX - mouseX;
if (length > maxRight) {
length = maxRight;
} else if (length < -maxLeft) {
length = -maxLeft;
}
var pgsWidth = $('.progress-bar-bg').width();
var rate = (oriLeft + length) / pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress(audio);
};
// 拖动结束
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
}
};
}
/**
* 更新进度条与当前播放时间
* @param {object} audio - audio对象
*/
function updateProgress(audio) {
var value = audio.currentTime / audio.duration;
$('#progressBar').css('width', value * 100 + '%');
$('#progressDot').css('left', value * 100 + '%');
$('#audioCurTime').html(transTime(audio.currentTime));
}
/**
* 播放完成时把进度调回开始的位置
*/
function audioEnded() {
$('#progressBar').css('width', 0);
$('#progressDot').css('left', 0);
$('#audioPlayer').attr('src', 'play.png');
}
/**
* 音频播放时间换算
* @param {number} value - 音频当前播放时间，单位秒
*/
function transTime(value) {
var time = "";
var h = parseInt(value / 3600);
value %= 3600;
var m = parseInt(value / 60);
var s = parseInt(value % 60);
if (h > 0) {
time = formatTime(h + ":" + m + ":" + s);
} else {
time = formatTime(m + ":" + s);
}
return time;
}
/**
* 格式化时间显示，补零对齐
* eg：2:4 --> 02:04
* @param {string} value - 形如 h:m:s 的字符串
*/
function formatTime(value) {
var time = "";
var s = value.split(':');
var i = 0;
for (; i < s.length - 1; i++) {
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
time += ":";
}
time += s[i].length == 1 ? ("0" + s[i]) : s[i];
return time;
}
</script>
</body>
</html>
相关图片：
pause.png
play.png
Html音频播放代码的更多相关文章
- ffmpeg音频播放代码示例-avcodec_decode_audio4
一.概述 最近在学习ffmpeg解码的内容,参考了官方的教程http://dranger.com/ffmpeg/tutorial03.html,结果发现这个音频解码的教程有点问题.参考了各种博客,并同 ...
- Unity实现代码控制音频播放
前言 很久没说过Unity了,现在说一下Unity用代码控制音频播放 准备工作 1.需要播放的音频 2.给需要加声音的对象加Audio Source组件 3.新建Play脚本,并绑定需要播放声音的对象 ...
- HTML5 音频播放器-Javascript代码(短小精悍)
直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...
- iOS开发系列--音频播放、录音、视频播放、拍照、视频录制
--iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...
- IOS开发之简单音频播放器
今天第一次接触IOS开发的UI部分,之前学OC的时候一直在模拟的使用Target-Action回调模式,今天算是真正的用了一次.为了熟悉一下基本控件的使用方法,和UI部分的回调,下面开发了一个特别简易 ...
- 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件
图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx ...
- Android音频播放之SoundPool
SoundPool 一.基本概念 在Android应用程序的开发过程中,经常需要播放多媒体文件,也许最先想到的会是MediaPlayer类了,该类提供了播放.暂停.停止及重复播放等功能性方法(该类位于 ...
- iOS开发----音频播放、录音、视频播放、拍照、视频录制
随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制,还是对麦克风.摄像头的操 ...
- [Cocos2D-x For WP8]CocosDenshion音频播放
Cocos2D-x的音频分为长时间的背景音乐和短的音效两种,我们可以通过SimpleAudioEngine::sharedEngine()方法来获取音频播放的引擎,然后调用对音频相关的操作方法就可以了 ...
- 【jquery】一款不错的音频播放器——Amazing Audio Player
前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...
随机推荐
- C#怎么在生成解决方案的过程中执行perl脚本(C#早期绑定)
转载 怎么在生成解决方案的过程中执行perl脚本 早期绑定在编译期间识别并检查方法.属性.函数,并在应用程序执行之前执行其他优化.在这个绑定中,编译器已经知道它是什么类型的对象以及它拥有的方法或属性. ...
- Go语言核心36讲20
在上两篇文章中,我主要为你讲解了与go语句.goroutine和Go语言调度器有关的知识和技法. 内容很多,你不用急于完全消化,可以在编程实践过程中逐步理解和感悟,争取夯实它们. 现在,让我们暂时走下 ...
- 微信公众号没有scope授权
微信公众号有自己的appid 开发平台的绑定也有自己的appid 看文档的时候,注意是使用公众号的appi还是开放平台的appid
- C温故补缺(一):数据类型和基本类型占位
数据类型 基本类型:就是算术类型,包括整型和实型 枚举类型:一组离散的整数 void类型:无可用值类型 派生类型:指针(*),数组([]),结构体(struct),共用体(union),函数(fun( ...
- UEFI引导linux启动过程的顺序，及修改办法
注意这里我说的是 uefi 启动 启动过程顺序 正常安装完一个Linux系统,硬盘会被分成俩个分区,一块是 fat32 文件系统(启动项存放位置),一块是ext4 文件系统(也就是系统真正的安装位置) ...
- 关于linux上实现arp攻击截取密码
前言 这几天简单的研究了一下arp攻击,有一些进展,记录一下 环境准备 这里我是利用arpspoof 这个软件简单实现arp攻击,这个命令是属于dsniff 软件包中的 所以首先安装软件 sudo a ...
- 【大数据面试】【框架】kafka：组成、台数/参数配置、持久化、ISR队列、宕机、丢数据、重复数据、数据积压、优化各种配置（刷盘、存盘、副本、压缩）、zk、其他
一.基本信息 1.组成 生产者 broker 消费者 zookeeper:brokerid.consumer信息(不包含生产者的信息) 2.需要安装多少台 2 * (生产者的峰值生产速率 * 副本 / ...
- Django查看内部sql语句的方式
一:查看内部sql语句的方式 方式1(queryset对象才能够点击query查看内部的sql语句) res = models.User.objects.values_list('name', 'ag ...
- Jmeter 函数助手之__time
接口中需要传入time时,可使用Jmeter 函数助手中的__time函数传入当前时间 格式和参数名称两个字段非必填,当都不填时直接点击生成按钮,得到13位时间戳:按图填写后,得到10位时间戳,获取当 ...
- GitHub上的一个Latex模板
代码下载:GitHub的项目地址或者在LATEX项目报告模板下载. 编译环境:Latex的编译器,如Ctex软件. 把源码clone或者下载到本地后,根据他的说明 如何开始 使用report.tex开 ...