简洁javascript音乐播放器

1.支持连续播放, 只要每次调用MakeList(id, url, name)就会按顺序生成播放列表
<script>
/*************************************************************
LovelyLife Player V1.0
Edited By LovelyLife
At 2006-09-16
All rights reservered
Code Start
*************************************************************/
var playid = "LovelyLifePlayer"
var status = "status"
var curId,arrPL,selected
var isStop,isLoop
arrPL = new Array()    //播放器列表
cur = 0
curId = 0
isStop = false
selected = 0
isLoop = true
function songObj(Id,url, name){
this.Id   = Id
this.url  = url
this.name = name
}
function playAndpauseIt(){
if(document.getElementById(status).innerText == '暂停'){
document.getElementById(playid).controls.pause()
document.getElementById(status).innerHTML ='播放'
}
else{ document.getElementById(status).innerText = '暂停'
document.getElementById(playid).controls.play()}
}
function stopIt(){
isStop = true
document.getElementById(status).innerHTML ='播放'
document.getElementById(playid).controls.stop()
}
function showTimer(){
var cp=document.getElementById(playid).controls.currentPosition
var cps=document.getElementById(playid).controls.currentPositionString
var dur=document.getElementById(playid).currentMedia.duration;
var durs=document.getElementById(playid).currentMedia.durationString;
var s = document.getElementById(playid).playState
var o = document.getElementById(playid).openState
if( s==2 || s==3)
document.getElementById('pos').innerText = " " + cps + "/" + durs + " "
else
document.getElementById('pos').innerText = " 00:00/" + durs + " "
if( s == 1 ){
if(isLoop && (curId > (arrPL.length - 1))){
curId = 0
return 0
}
clearIt()
if(curId<0 || curId>arrPL.length){
alert("当前没有歌曲!,请查看播放列表!")
return false
}
nxtPlay()
}
if( s == 10 && arrPL.length >0 )
nxtPlay()
}
function nxtPlay(){
isStop = true
if(curId > arrPL.length - 1){
document.getElementById("songName").innerText = "没有歌曲了,请选择上一曲!"
document.getElementById(playid).URL = "NULL"
return false
}
curId++
clearIt()
setIt(curId)
PlayIt(curId)
}
function prePlay(){
isStop = true
if(curId<0){
document.getElementById("songName").innerText = "没有歌曲了,请选择下一曲!"
document.getElementById(playid).URL = "NULL"
return false
}
curId--
clearIt()
setIt(curId)
PlayIt(curId)
}
function PlayIt(cid){
if(curId<0 || curId>arrPL.length -1){
document.getElementById("songName").innerText  = "当前没有歌曲!,请查看播放列表!"
return false
}
//var url = "url.asp?iid=" + arrPL[cid].Id
//url = LoadIt(url)
url = arrPL.url
curId = cid
if(url == "None"){
document.getElementById("songName").innerText = "加载歌曲未找到!播放下一曲!"
nxtPlay()
return false
}
document.getElementById(playid).URL = url
document.getElementById("songName").innerText = arrPL[cid].name
}
function clearIt(){
if((arrPL.length - 1 <0) || selected < 0 || selected > arrPL.length){
//document.getElementById("songName").innerText = "加载歌曲未找到!播放下一曲!"
return false
}
var selectedIndex = eval("td_" + selected)
selectedIndex.style.border = ""
}
function setIt(tid){
if(tid<0 || tid>arrPL.length-1){
document.getElementById("songName").innerText  = "当前没有歌曲!,请查看播放列表!"
return false
}
var selectedIndex = eval("td_" + tid)
selectedIndex.style.border = "1px solid #F00"
selected = tid
}
function InitPlay(songName,url,auto){
//document.write("<div id=player style=/"width:70%/"></div>")
var strTemp = "<object classid=/"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6/""
strTemp += " type=/"application/x-oleobject/" width=/"0/" height=/"0/" id=" + playid
strTemp += " style=/"position:relative; left:0px; top:0px; width:0px; height:0px;/">/n"
strTemp += "  <param name=/"autoStart/" value=/""+auto+"/">/n"
strTemp += "  <param name=/"balance/" value=/"0/">/n"
strTemp += "  <param name=/"currentPosition/" value=/"0/">/n"
strTemp += "  <param name=/"currentMarker/" value=/"0/">/n"
strTemp += "  <param name=/"enableContextMenu/" value=/"0/">/n"
strTemp += "  <param name=/"enableErrorDialogs/" value=/"0/">/n"
strTemp += "  <param name=/"enabled/" value=/"-1/">/n"
strTemp += "  <param name=/"fullScreen/" value=/"0/">/n"
strTemp += "  <param name=/"invokeURLs/" value=/"0/">/n"
strTemp += "  <param name=/"mute/" value=/"0/">/n"
strTemp += "  <param name=/"playCount/" value=/"1/">/n"
strTemp += "  <param name=/"rate/" value=/"1/">/n"
strTemp += "  <param name=/"uiMode/" value=/"none/">/n"
strTemp += "  <param name=/"volume/" value=/"100/">/n"
strTemp += "  <param name=/"URL/" value=/"" + url + "/">/n"
strTemp += "</object>/n<font class=HighLight style=/"background-color: #EEE;padding: 8px;height:30px;width:100%/">"
strTemp += "<b>点播的歌曲: <marquee width=30% speed=3><font color=red id=songName>" + songName + "</font></marquee>"
strTemp += "   [<font id=pos></font>]"
strTemp += "  [<font onclick=playAndpauseIt() style='cursor:hand;' id=" + status + ">播放</font>]"
strTemp += "[<font onclick=stopIt() style='cursor:hand;'>停止</font>]"
if((arrPL.length - 2) >= 0){
strTemp += "[<font onclick=prePlay() style='cursor:hand;'>上曲</font>]"
strTemp += "[<font onclick=nxtPlay() style='cursor:hand;'>下曲</font>]"
}
strTemp += " </b>"
document.getElementById('player').innerHTML = strTemp
temptimer=setInterval('showTimer()',1000);
}
function playX(cur){
PlayIt(cur)
clearIt()
setIt(cur)
curId = cur
selected = cur
}
function MakeList(Id,Url,Name){
arrPL[cur] = new songObj(Id,Url, Name)
cur++
}
function loopIt(){
if(isLoop){
document.getElementById('sloop').innerText = "不循环"
isLoop = false
}else{
document.getElementById('sloop').innerText = "循环播放"
isLoop = true
}
}
/* Code End */
window.attachEvent('onload', function(){InitPlay('女人如烟[词曲:穆真 演唱:魏佳艺]','http://happy369.com/yy/nrry.mp3', 0)})
</script>
<div id=player style="width:70%"></div>

时间: 2024-09-20 05:41:38

简洁javascript音乐播放器的相关文章

JavaScript实现带播放列表的音乐播放器实例分享_javascript技巧

代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!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"

运用js教你轻松制作html音乐播放器_javascript技巧

用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

JS模拟酷狗音乐播放器收缩折叠关闭效果代码_javascript技巧

本文实例讲述了JS模拟酷狗音乐播放器收缩折叠关闭效果代码.分享给大家供大家参考,具体如下: 这是一款模拟酷狗音乐播放器的关闭特效,采用JavaScript实现,关闭的时候播放界面缩成一条线,然后消失,就像有些电视机突然停电的效果,很有意思的网页动画特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-kugou-music-player-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

Swift版音乐播放器(简化版)

这几天闲着也是闲着,学习一下Swift的,于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神, 希望对大家有帮助! 这个DEMO里,使用到了 AudioPlayer(对音频封装的库) FreeStreamer(老外写的音频高效处理库) LKDBHelper(将数据模型直接写到数据库中的库) AFNetworking (网络库) SDWebImage (图片获取库) 另外,我也把OC版的ProgressHUD转成了Swift版本的HYBProgressHUD,希望对大

asp.net实现在线音乐播放器示例

 这篇文章主要介绍了asp.net实现在线音乐播放器示例,需要的朋友可以参考下  代码如下: <HTML>      <HEAD><TITLE>Playback Example</TITLE>      </HEAD>      <BODY>      <script language="JavaScript">      function   addmedia(url)      {      //

2015音乐播放器排行榜

  1.酷狗音乐播放器: http://www.xpgod.com/soft/75.html (KuGou播放器)是国内最大的P2P音乐共享平台,采用了P2P的先进构架设计研发,为用户设计了高传输效果的文件下载功能,通过它能实现P2P数据分享传输;系统天堂为您提供最新版的酷狗音乐播放器2015官方下载. 2.酷我音乐盒:http://www.xpgod.com/soft/5506.html 酷我音乐盒是全球第一家集音乐的发现.获取和欣赏于一体的一站式个性化音乐服务平台.它运用世界最新的技术,为用

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

jquery 音乐播放器效果插件 jPlayer

<!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' lang='en' xml:lang='en'> <head> <title>jquery 音乐播放器效果插件 jplayer<

点评Linux平台上的音乐播放器Audacious 3.4

在Linux平台上,虽然音乐播放器软件多如牛毛,但是称得上音乐播放器这个名称的为数不多.Audacious是一款非常知名的软件,并且就是这些能被叫做音乐播放器的少数软件之一.   版本点评:Audacious 3.4 Audacious是一款开源的音乐播放器软件. 作为XMMS播放器软件的分支,Audacious播放器可以随心所欲的播放你的音乐,并且不会抢占其他任务的系统资源. 在你的所有音乐库里,你可以进行拖动文件夹和放置私人的歌曲文件.搜索歌手和专辑或者编辑你的自定义播放列表等操作. 特性: