재생 목록 예제 Sharing_javascript 기술을 사용하여 음악 플레이어의 JavaScript 구현
이 코드는 가장 기본적인 플레이어 구현과 비교하여 재생 목록을 추가하고 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">
<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 매개변수: 총 3개의 매개변수가 있습니다. 첫 번째 매개변수는 ID, 두 번째 매개변수는 음악의 URL 주소, 세 번째 매개변수는 노래 이름입니다. 설명은 모두 댓글에 기재되어 있으니 누구나 읽고 참고하시면 됩니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7520
15
1378
52
81
11
54
19
21
68
Win11에서 오디오 밸런스를 조정하는 방법은 무엇입니까? (Win11은 볼륨의 왼쪽 및 오른쪽 채널을 조정합니다)
Feb 11, 2024 pm 05:57 PM
Win11 컴퓨터에서 음악을 듣거나 영화를 볼 때 스피커나 헤드폰의 소리가 불균형한 경우 사용자는 필요에 따라 밸런스 수준을 수동으로 조정할 수 있습니다. 그럼 어떻게 조정해야 할까요? 이 문제에 대응하여 편집자는 모든 사람에게 도움이 되기를 바라며 자세한 작업 튜토리얼을 가져왔습니다. Windows 11에서 왼쪽 및 오른쪽 오디오 채널의 균형을 맞추는 방법은 무엇입니까? 방법 1: 설정 앱을 사용하여 키를 탭하고 설정을 클릭합니다. Windows에서는 시스템을 클릭하고 사운드를 선택합니다. 추가 사운드 설정을 선택하세요. 스피커/헤드폰을 클릭하고 속성을 선택합니다. 수준 탭으로 이동하여 잔액을 클릭합니다. "왼쪽"을 확인하고
Bose Soundbar Ultra 출시 경험: 홈시어터를 상자에서 꺼내자마자 바로 사용할 수 있나요?
Feb 06, 2024 pm 05:30 PM
제가 기억하는 한, 저는 집에 대형 플로어 스탠딩 스피커 한 쌍을 가지고 있었습니다. 저는 TV가 완전한 사운드 시스템을 갖추고 있어야만 TV라고 부를 수 있다고 항상 믿어왔습니다. 하지만 처음 일을 시작했을 때는 전문적인 홈 오디오를 구입할 여유가 없었습니다. 제품 포지셔닝을 문의하고 이해한 결과 사운드바 카테고리가 음질, 크기 및 가격 측면에서 나에게 매우 적합하다는 것을 알았습니다. 그래서 사운드바로 가기로 결정했습니다. 신중한 선택 끝에 2024년 초 보스가 출시한 파노라믹 사운드바 제품, 보스 홈 엔터테인먼트 스피커 울트라를 선택했습니다. (사진 출처: Lei Technology 촬영) 일반적으로 "원래의" Dolby Atmos 효과를 경험하려면 측정되고 보정된 서라운드 사운드 + 천장을 집에 설치해야 합니다.
iPhone의 Apple Music에서 재생 목록을 정렬하는 방법
Feb 07, 2024 pm 10:33 PM
이제 Apple Music은 재생목록에 노래가 표시되는 순서를 재정렬하는 기능을 제공합니다. 노래 제목, 아티스트, 앨범, 출시 날짜를 기준으로 재생 목록을 정렬할 수 있습니다. 이 기능은 사용자가 직접 생성한 재생목록뿐만 아니라 Apple Music의 모든 재생목록에서 작동합니다. 이 기사에서는 iPhone의 AppleMusic 재생 목록에서 노래를 정렬하는 방법에 대해 설명합니다. iPhone의 AppleMusic 재생 목록에서 노래를 정렬하는 방법 아래 단계에 따라 원하는 대로 AppleMusic 재생 목록의 노래를 재정렬할 수 있습니다. iPhone에서 재생목록의 노래를 정렬하려면
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
Realtek HD 오디오 관리자에서 마이크를 설정하는 방법
Jan 02, 2024 am 09:33 AM
win10 시스템은 다양한 설정과 조정이 가능한 시스템입니다. 오늘은 에디터가 리얼텍 고화질 오디오 매니저에서 마이크 설정 방법에 대한 솔루션을 가져왔습니다! 관심 있으신 분들은 오셔서 구경해보세요. Realtek HD 오디오 관리자에서 마이크를 설정하는 방법: 1. 바탕 화면 왼쪽 하단에 있는 숨겨진 아이콘 표시에서 "realtek HD 오디오 관리자" 아이콘을 찾습니다. 2. 인터페이스로 들어가려면 클릭하세요. 가장 먼저 보이는 것은 "스피커 페이지"입니다. 이 인터페이스에서는 스피커 구성을 통해 스피커 사운드를 조정할 수 있습니다. 3. 다음은 음향 효과입니다. 원하는 음향 효과 환경과 "이퀄라이저, 팝, 록, 클럽" 등을 선택할 수 있습니다. 4. 다음은 실내음질보정입니다. 실내공간보정은 "
Windows 11 오디오 향상 기능을 활성화하는 방법
Jan 26, 2024 am 10:54 AM
일부 친구들은 컴퓨터의 사운드를 최대로 높여도 볼륨이 여전히 너무 낮다고 보고했습니다. 이때 시스템의 향상된 오디오 기능을 켜야 합니다. , 편집자가 자세한 소개를 해줄 것입니다. 도움이 필요한 친구들은 Win11에서 향상된 오디오를 켜는 방법을 살펴볼 수 있습니다. 여는 방법: 1. 왼쪽 하단에 있는 작업 표시줄에서 시작을 마우스 오른쪽 버튼으로 클릭하고 옵션 목록에서 "설정"을 선택합니다. 2. 새 인터페이스로 들어간 후 "시스템"에서 "사운드" 옵션을 클릭합니다. 3. 그런 다음 "고급"에서 "모든 사운드 장치"를 클릭하십시오. 4. 그런 다음 "출력 장치"에서 "헤드폰" 또는 "스피커"를 선택합니다. 5. 마지막으로 "향상된 오디오"를 찾아 오른쪽에 있는 스위치 버튼을 켭니다.
0x00005b3 오류로 인해 Realtek HD 오디오 드라이버 설치에 실패했습니다.
Feb 19, 2024 am 10:42 AM
Windows 11/10 PC에서 RealtekHD 오디오 드라이버 오류 오류 코드 0x00005b3이 발생하는 경우 다음 단계를 참조하여 문제를 해결하세요. 문제 해결 및 오류 해결 과정을 안내해 드리겠습니다. 오류 코드 0x00005b3은 오디오 드라이버 설치 문제로 인해 발생할 수 있습니다. 현재 드라이버가 손상되었거나 부분적으로 제거되어 새 드라이버 설치에 영향을 줄 수 있습니다. 이 문제는 디스크 공간이 부족하거나 Windows 버전과 호환되지 않는 오디오 드라이버로 인해 발생할 수도 있습니다. RealtekHD 오디오 드라이버 설치에 실패했습니다! ! [오류 코드: 0x00005B3] Realtek 오디오 드라이버 설치 마법사에 문제가 있는 경우 계속해서 읽어보세요.
왜 다른 사람들은 소다 음악 재생 목록을 볼 수 없나요?
Feb 27, 2024 pm 12:30 PM
Soda Music은 음악 애호가를 위해 맞춤 제작된 음악 플레이어 소프트웨어로 현재 가장 인기 있고 가장 대중적이며 가장 클래식한 음악 작품을 다루는 수많은 음악 리소스를 보유하고 있습니다. 독립 창작곡, 팝 히트곡 또는 고전 음악을 좋아하든 Soda Music에서 귀하의 필요에 맞는 음악을 찾을 수 있습니다. 하지만 우리가 좋아하는 음악을 수집한 후에는 다른 사람들이 그것을 보는 것을 원하지 않을 수도 있습니다. 그렇다면 탄산음료 음악에 대해 더 알고 싶은 플레이어는 어떻게 해야 합니까? 탄산음료 재생목록은 왜 나만 볼 수 있나요? 1. 먼저 소다뮤직 앱을 열고 아래 그림과 같이 오른쪽 하단에 있는 "내"를 클릭하세요. 2. 아래 그림과 같이 내 인터페이스로 들어가서 설정하려는 재생 목록을 엽니다. 3. 재생목록 세부정보를 입력하세요.
