简洁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>
目录
相关文章
|
6天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器
|
10月前
|
JavaScript 前端开发
简洁实用的JavaScript代码示例:开启全屏和退出全屏操作
在项目中出现了一个需求,需要实现将页面投屏到屏幕上,并能够进行开启全屏和退出全屏的操作。 尽管网上有许多第三方开源库可供使用,但由于后续业务场景的不确定性,修改源代码可能带来较大的成本和风险。鉴于全屏功能的实现并不复杂,因此我自己封装了一个解决方案。
85 0
|
JavaScript 前端开发 算法
html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟
使用前端三件套实现一个实时跟新的时钟,其中包括电子时钟和刻度时钟
247 0
html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟
|
JavaScript 前端开发
doT.js:一个Node.js和浏览器环境下快速简洁的javascript模板引擎
doT.js:一个Node.js和浏览器环境下快速简洁的javascript模板引擎
152 0
|
JavaScript 前端开发
Axure实战15:使用Axure和JavaScript创建一个MusicPlayer音乐播放器
Axure实战15:使用Axure和JavaScript创建一个MusicPlayer音乐播放器
450 0
Axure实战15:使用Axure和JavaScript创建一个MusicPlayer音乐播放器
|
前端开发 JavaScript
8 种技巧让你编写更简洁的 JavaScript 代码
8 种技巧让你编写更简洁的 JavaScript 代码
220 0
8 种技巧让你编写更简洁的 JavaScript 代码
|
JavaScript 前端开发
JavaScript 代码简洁之道
摘要: 可以说是《Clean Code》的JS代码示例了,值得参考。 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有。 测试代码质量的唯一方式:别人看你代码时说 f * k 的次数。
4639 0
|
2天前
|
存储 JavaScript 前端开发
从零开始学习Vue.js
Vue.js 是一种流行的前端框架,它使用简单,灵活且易于上手。如果你是一个前端开发者,并想要学习 Vue.js,本文将为您提供一个从零开始的指南。我们将探讨 Vue.js 的基础知识和常用功能,以及如何构建一个简单的 Vue.js 应用程序。
|
4天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
5天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发