Web Front-end
JS Tutorial
JavaScript implementation of music player with playlist example sharing_javascript skills
JavaScript implementation of music player with playlist example sharing_javascript skills
The code adds a playlist compared to the most basic player implementation, and uses MakeList to implement multiple playbacks. If necessary, you can use it directly:
<!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>Untitled Page</title>
</head>
<body style="font-family:Verdana; font-size:12px">
<script>
/*************************************************************
LovelyLife Player V1.0
Edited By LovelyLife
At 2006-09-16
All rights reservered
Code Start
Modify by http://www.tt419.cn/
*************************************************************/
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
}
url = arrPL[cid].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){
return false
}
}
function setIt(tid){
if(tid<0 || tid>arrPL.length-1){
document.getElementById("songName").innerText = "当前没有歌曲！，请查看播放列表！"
return false
}
}
function InitPlay(songName,url,auto){
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", 1);
playAndpauseIt();
})
</script>
<div id=player style="width:70%"></div>
<script>
MakeList(1,"http://happy369.com/yy/nrry.mp3","111");
MakeList(2,"http://www.gxyx.net/sourcefile/0/0/2/2958.wma","222");
MakeList(3,"http://hz.98777.com/rm0402/q/258.rm","333");
MakeList(4,"http://www.gxyx.net/sourcefile/0/0/2/2958.wma","4444");
</script>
</body>
</html>
MakeList parameters: There are 3 parameters in total. The first parameter is the ID, the second parameter is the URL address of the music, and the third parameter is the name of the song. The instructions are all written in the comments. Everyone is welcome to read and refer to them.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to adjust audio balance in Win11? (Win11 adjusts the left and right channels of volume)
Feb 11, 2024 pm 05:57 PM
When listening to music or watching movies on a Win11 computer, if the speakers or headphones sound unbalanced, users can manually adjust the balance level according to their needs. So how do we adjust? In response to this problem, the editor has brought a detailed operation tutorial, hoping to help everyone. How to balance left and right audio channels in Windows 11? Method 1: Use the Settings app to tap the key and click Settings. Windows click System and select Sound. Choose more sound settings. Click on your speakers/headphones and select Properties. Navigate to the Levels tab and click Balance. Make sure "left" and
Bose Soundbar Ultra launch experience: Home theater right out of the box?
Feb 06, 2024 pm 05:30 PM
For as long as I can remember, I have had a pair of large floor-standing speakers at home. I have always believed that a TV can only be called a TV if it is equipped with a complete sound system. But when I first started working, I couldn’t afford professional home audio. After inquiring and understanding the product positioning, I found that the sound bar category is very suitable for me. It meets my needs in terms of sound quality, size and price. Therefore, I decided to go with the soundbar. After careful selection, I selected this panoramic soundbar product launched by Bose in early 2024: Bose home entertainment speaker Ultra. (Photo source: Photographed by Lei Technology) Generally speaking, if we want to experience the "original" Dolby Atmos effect, we need to install a measured and calibrated surround sound + ceiling at home.
How to sort playlists in Apple Music on iPhone
Feb 07, 2024 pm 10:33 PM
Apple Music now offers the ability to rearrange the order in which songs appear in playlists. You can sort the playlist based on the song's title, artist, album, and release date. This feature works with all playlists in Apple Music, not just those you create yourself. In this article, we will explain how to sort songs in playlists in AppleMusic on iPhone. How to Sort Songs in Playlist in AppleMusic on iPhone You can follow the steps below to rearrange songs in AppleMusic playlist according to your preference. To sort songs in a playlist, on your iPhone
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
How to set up the microphone in realtek high-definition audio manager
Jan 02, 2024 am 09:33 AM
The win10 system is a system that can carry out various settings and adjustments. Today, the editor brings you the solution on how to set the microphone in realtek high-definition audio manager! If you are interested, come and take a look. How to set the microphone in realtek high-definition audio manager: 1. Find the "realtek high-definition audio manager" icon in the show hidden icons in the lower left corner of the desktop. 2. Click to enter the interface. The first thing you see is the "Speaker Page". In this interface, you can adjust the speaker sound through speaker configuration. 3. Next is the sound effect. You can choose the sound effect environment you want as well as "equalizer, pop, rock, club" and so on. 4. Next is the indoor sound quality correction. Indoor space correction can only correct the "
How to enable Windows 11 audio enhancements
Jan 26, 2024 am 10:54 AM
Some friends have reported that even if the sound in their computer is turned up to the maximum, the volume is still too low. At this time, the enhanced audio function in the system can be turned on. So how should it be done? Next, the editor will give you a detailed introduction. Friends who need it can take a look at how to turn on enhanced audio in Win11. How to open: 1. Right-click Start in the taskbar in the lower left corner and select "Settings" in the option list. 2. After entering the new interface, click the "Sound" option in "System". 3. Then click "All Sound Devices" in "Advanced". 4. Then select "Headphones" or "Speakers" in "Output Devices". 5. Finally, find "Enhanced Audio" and turn on the switch button on the right side of it.
Installation of Realtek HD audio driver failed with error 0x00005b3
Feb 19, 2024 am 10:42 AM
If you encounter RealtekHD audio driver failure error code 0x00005b3 on Windows 11/10 PC, please refer to the following steps to resolve the issue. We'll guide you through troubleshooting and resolving the error. Error code 0x00005b3 may be caused by audio driver installation issues. It may be that the current driver is corrupted or partially uninstalled, affecting the installation of the new driver. This issue can also be caused by insufficient disk space or an audio driver that is incompatible with your Windows version. Installation of RealtekHD audio driver failed! ! [Error Code: 0x00005B3] If there is a problem with the Realtek Audio Driver Installation Wizard, continue reading
Why don't others see the soda music playlist?
Feb 27, 2024 pm 12:30 PM
Soda Music is a music player software tailor-made for music lovers. It has a large number of music resources, covering the hottest, most popular and most classic music works at the moment. Whether you like independent creations, pop hits or classic oldies, you can find music that meets your needs in Soda Music. But after we collect the music we like, we may not want others to view it. So how do we set the soda music to be visible only to ourselves? Players who want to know more about it can follow this article to learn more. How come the soda music playlist is only visible to me? 1. First open the Soda Music App and click "My" in the lower right corner, as shown in the picture below. 2. Enter the My interface and open the playlist you want to set, as shown in the picture below. 3. Enter the playlist details
