jQuery实现多个MP3音频播放

jQuery结合template模板渲染音频列表，需求：点击播放/暂停按钮实现播放/暂停，当列表中任一一首歌曲播放时，点击其他播放按钮此音频播放其他音频暂停，点击进入专题页面分别跳转与之对应的页面，代码附上：

html:

<!--音频播放-->
<audio id="music"></audio><!--往期回顾-->
<div class="pastpage"><div class="pasttitle">往期回顧</div><div class="pastlist"></div>
</div>

css:

 .pastpage {.pasttitle {padding: 25px 30px;font-size: 34px;color: #494949;background: #f0fef9;     }.pastlist {    background: #fff;.past {display: flex;justify-content: space-between;align-items: center;padding: 30px;border-bottom: 1px solid #e9e9e9;li {.faceinfo {img {width: 130px;height: 130px;border-radius: 50%;border: 2px solid #c6ecdf;}}&:nth-child(2) {flex: 1;padding-left: .2rem;overflow-x: hidden;text-overflow: ellipsis;white-space: nowrap;color: #494949;.nickname {width: 290px;font-size: 26px;overflow-x: hidden;text-overflow: ellipsis;white-space: nowrap;}}&:nth-child(3) {.playButton {margin: 0 auto 20px;width: 70px;height: 70px;img {display: block;width: 100%;}}.triangular {padding: 0 .2rem;border: 2px solid #fff;img {width: 10px;height: 11px;}}.triangular2 {cursor: pointer;width: 206px;height: 45px;img {display: block;width: 100%;}}}}}}}

template

<!--往期回顾-->
<script id="fansTemplate" type="text/html">{{each}}<ul class="past" pfid="{{$value.pfid}}"><li><div class="faceinfo"><img{{if $index<5}}src="{{$value.headimg}}" alt="" class="anchorimg goto"{{else}}src="static/images/false.png" data-original="{{$value.headimg | heatimgformat}}" alt="" class="anchorimglazy goto"{{/if}}{{if $value.live_id!=null}}data-direction="{{$value.stream_direction}}" data-stream="{{$value.stream_type}}"data-livekey="{{$value.live_key}}" data-liveurl="{{$value.live_url}}" data-pfid="{{$value.pfid}}"data-liveid="{{$value.live_id}}" data-cdnid="{{$value.cdn_id}}" data-liveimg="{{$value.live_img}}"{{else}}data-pfid="{{$value.pfid}}"{{/if}}></div></li><li><div class="nickname">{{$value.nickname}}</div><div class="hotvalue">ID：{{$value.pfid}}</div></li><li><div class="playButton" onclick="play(this)"  rank="{{$value.rank}}"><img src="static/images/playButton.png" alt=""></div><div class="triangular2" rank="{{$value.rank}}"><img src="static/images/htmlbutton.png" alt=""></div></li></ul>{{/each}}
</script>

json:

var muccidata = {"list": [{"nickname": "1","headimg": "static/images/mucci/1.png","pfid": "1","rank":"1","gotourl":"../../web/1/index.html","musicurl":"http://xxx1.mp3"},{"nickname": "2","headimg": "static/images/mucci/2.png","pfid": "2","rank":"2","gotourl":"../../web/2/index.html","musicurl":"http://xxx2.mp3"},{"nickname": "3","headimg": "static/images/mucci/3.png","pfid": "3","rank":"3","gotourl":"../../web/3/index.html","musicurl":"http://xxx3.mp3"},{"nickname": "4","headimg": "static/images/mucci/4.png","pfid": "4","rank":"4","gotourl":"../../web/4/index.html","musicurl":"http://xxx4.mp3"},{"nickname": "5","headimg": "static/images/mucci/5.png","pfid": "5","rank":"5","gotourl":"../../web/5/index.html","musicurl":"http://xxx5.mp3"}]
};

js:

//1.进入音频对应的专题页面
var gotomucci = muccidata.list;
$('body').on('click','.triangular2',function(){
var listrank = $(this).attr('rank');
location.href = gotomucci[listrank].gotourl;//2.音频列表循环var muccilist = muccidata.list;if (muccilist.length > 0) {var fanslisthtml = template('fansTemplate', muccilist);       $('.pastlist').prepend(fanslisthtml);     }setTimeout(function () {$('img.lazy').each(function () { //懒加载if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {this.src = 'static/images/false.png';}});}, 2000);//封装播放按钮
function play(tap) {var playClass=$(tap);$('.playButton img').attr('src','static/images/playButton.png');playClass.find('img').attr('src','static/images/stopBtn.png');if(playClass.hasClass('lock')){playClass.find('img').attr('src','static/images/playButton.png');playClass.removeClass('lock');document.getElementById('music').pause();} else {document.getElementById('music').pause();$('#music').attr('src',muccidata.list[$(tap).attr('rank')].musicurl);document.getElementById('music').play();$('.playButton,.djplayButton').removeClass('lock');$('.djplayButton img').attr('src','static/images/djplay.png');playClass.addClass('lock');}
}

效果图：

jQuery实现多个MP3音频播放相关推荐

java h5在线音频_html5 mp3音频播放代码网页在线录音
特效描述:html5 mp3音频播放网页在线录音.本地设置麦克风权限,才能正常预览代码结构 1. 引入JS 2. HTML代码 Html5网页JavaScript录制MP3音频录制停止上传 ...
Discuz论坛web网页mp3音频播放器源码下载
最近在做一个DZ论坛的搭建,在前几天的时候遇到Flash+Js的幻灯片的问题,特写了一篇<JS+Flash焦点图轮播源代码(2屏,3屏,多屏)>来记录论坛搭建过程遇到的一些技术性问题,以便 ...
【190223】VC++ MP3音频播放器源代码
源码下载简介这是一个VC课堂的作品,是一款MP3音频播放器,界面做的很漂亮,与一般的播放工具功能相比差不多,本例除了研究音频播放类的知识点外,还介绍了按钮的绘制,界面的组合等,所以说比较综合,这类程 ...
HTML，js自制MP3音频播放器
HTML,js自制音频播放器示意图演示效果 MP3音频播放器文件结构 HTML代码 <!DOCTYPE html> <html><head><meta ...
【Arduino + Linux】基于 Helix 解码库实现 MP3 音频播放
目录一.MP3 文件结构 1.1.ID3V2.3 1.1.1.标签头 1.1.2.扩展标签头 1.1.3.标签帧 1.2.音频数据 1.3.ID3V1 1.4.MP3文件结构图二.MP3 解码库 ...
Ehome：智能家居之多媒体系统mp3音频播放
7. MP3功能的实现 7.1 基本概念 PCM: 脉冲编码调制声音是模拟量计算机能处理的是数字量,涉及模拟量和数字量的相互转换 ...
Android MP3音频播放器仿唱片机播放动画，仿网易云播放动画，旋转动画，MediaPlayer AudioManager
废话不多说上代码 private AudioManager audioManager;private SimpleDateFormat format;private SeekBar seekBar;p ...
10个jQuery HTML5音频播放器
根据Buzz Angle Music的数据,2017年第一季度,仅美国就消费了830亿个音频流.这比上一季度增长了61.2%. 同时,音乐销量下降了23.8%. 2017年5月8日:此热门文章已更新, ...
5 个免费的 Web 视频及音频播放器
在线视频,在线音频越来越流行,即使你的网站成不了 YouTube,也不妨在上面部署一些可以直接在线播放的视频,在 Web 上播放媒体,如今最可靠方案莫过于 Flash.本文介绍5个免费的,简单易用的, ...

jQuery实现多个MP3音频播放

jQuery实现多个MP3音频播放相关推荐

最新文章

热门文章