标签:html mp3 audio javascript .net
最近项目中用到音频播放,就写了一个demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JPlayer/jquery.min.js" type="text/javascript"></script> <script src="JPlayer/jquery.jplayer.min.js" type="text/javascript"></script> <link href="Css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> //歌曲绑定 var songList = new Array(); songList.push("/Audio/飘洋过海来看你.mp3"); songList.push("/Audio/广岛之恋.mp3"); songList.push("/Audio/贝加尔湖畔.mp3"); var songId = 0; $(document).ready(function () { //播放初始化 $('#jp_sound').jPlayer({ ready: function () { $(this).jPlayer('setMedia', { mp3: songList[0] }); }, supplied: 'mp3', swfPath: '/JPlayer', wmode: 'window', autoBlur: false, smoothPlayBar: true, solution: 'flash, html', preload: 'auto', ended: function () {//结束事件 if (document.getElementById('CircleAudio').checked) $('#jp_sound').jPlayer('play'); else { NextSong(); } }, volume: 0.5, timeupdate: function (event) {//时间更改事件 $("#time").html(" " + $.jPlayer.convertTime(event.jPlayer.status.currentTime) + "/" + $.jPlayer.convertTime(event.jPlayer.status.duration)); $("#currentProgress").css("width", event.jPlayer.status.currentPercentRelative + "%"); } }); }) var isPlay = false; //播放 function Play() { $('#jp_sound').jPlayer('play'); isPlay = true; } //停止 function Stop() { $('#jp_sound').jPlayer('stop'); $("#time").html(" 00:00/00:00"); isPlay = false; } //暂停 function Pause() { $('#jp_sound').jPlayer('pause'); } //静音 function StopAudio() { $('#jp_sound').jPlayer('mute'); } //恢复音量 function RecoverAudio() { $('#jp_sound').jPlayer('unmute'); } //选择某个进度播放 function SetProgress(event) { if (isPlay == true) { var precent = event.clientX / 194; $("#jp_sound").jPlayer("playHead", precent * 100); $('#jp_sound').jPlayer('play'); } } //是否循环播放 function CircleAudio() { if (document.getElementById('CircleAudio').checked) { if (isPlay == true) $('#jp_sound').jPlayer('play'); } } //上一首 function PreSong() { if(isPlay == true) { songId--; if(songId<0) { songId = songList.length - 1; } PlaySong(songId); } } //下一首 function NextSong() { if (isPlay == true) { songId++; if(songId>=songList.length) { songId = 0; } PlaySong(songId); } } //播放某一首歌曲 function PlaySong(id) { if (id == 0) { $('#jp_sound').jPlayer('setMedia', { mp3: songList[0] }); } else if (id == 1) { $('#jp_sound').jPlayer('setMedia', { mp3: songList[1] }); } else if (id == 2) { $('#jp_sound').jPlayer('setMedia', { mp3: songList[2] }); } $('#jp_sound').jPlayer('play'); } </script> </head> <body> <div id="jp_sound"></div> <div> <button onclick="Play()">播放</button> <button onclick="Pause()">暂停</button> <button onclick="Stop()">停止</button> <button onclick="StopAudio()">静音</button> <button onclick="RecoverAudio()">恢复音量</button> <button onclick="PreSong()">上一首</button> <button onclick="NextSong()">下一首</button> <input id="CircleAudio" type="checkbox" checked="checked" onclick="CircleAudio()"/>单曲循环 </div> <div class="jp-Progress"> <div class="jp-seek-bar" id="widthPro" onmousedown="SetProgress(event)" style="width: 100%;background-color: #F9F6B6;"> <div style="width: 0%; background-color: #808000; height: 15px;" id="currentProgress"></div> </div> </div> <div> <label id="time" style="font-family: 微软雅黑; font-weight: bold;"> 00:00/00:00</label> </div> </body> </html>
完整代码,去我的CSDN里面下载:
标签:html mp3 audio javascript .net
原文地址:http://blog.csdn.net/wanlong360599336/article/details/46474415