プレイリストを使用した音楽プレーヤーの JavaScript 実装の例 Sharing

ホームページ

ウェブフロントエンド

jsチュートリアル

プレイリストを使用した音楽プレーヤーの JavaScript 実装の例 Sharing_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:11 PM

javascript js プレイリスト曲リスト音楽プレーヤーオーディオ

このコードは、最も基本的なプレーヤーの実装と比較してプレイリストを追加し、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、2 番目のパラメーターは音楽の URL アドレス、3 番目のパラメーターは曲の名前です。手順はすべてコメントに記載されていますので、ぜひ読んで参考にしてください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7322

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Win11でオーディオバランスを調整するにはどうすればよいですか? (Win11では左右のチャンネルの音量を調整します) Feb 11, 2024 pm 05:57 PM

Win11 コンピューターで音楽を聴いたり、映画を見たりするときに、スピーカーまたはヘッドフォンの音がアンバランスに聞こえる場合は、ユーザーは必要に応じてバランスレベルを手動で調整できます。では、どうやって調整すればよいのでしょうか？この問題に対応して、編集者は皆様のお役に立ちたいと考えて、詳細な操作チュートリアルを提供しました。 Windows 11 で左右のオーディオチャンネルのバランスをとるにはどうすればよいですか?方法 1: 設定アプリを使用してキーをタップし、[設定] をクリックします。 Windows では、「システム」をクリックし、「サウンド」を選択します。さらにサウンド設定を選択します。スピーカー/ヘッドフォンをクリックし、[プロパティ]を選択します。「レベル」タブに移動し、「バランス」をクリックします。「左」であることを確認し、

Bose Soundbar Ultra の発売体験: 箱から出してすぐにホームシアター? Feb 06, 2024 pm 05:30 PM

私は物心ついた頃から、家に大きなフロアスタンディングスピーカーを 2 台置いていて、テレビは完全なサウンドシステムを備えていてこそテレビと呼べるものだと常々信じてきました。しかし、私が働き始めた頃は、プロ仕様のホームオーディオを買う余裕がありませんでした。製品の位置づけを検討し理解した結果、音質、サイズ、価格のすべての点で私のニーズを満たしているサウンドバーというカテゴリーが私にとって非常に適していることがわかりました。そこで、サウンドバーを導入することにしました。慎重に選んだ結果、2024 年初頭にボーズが発売したこのパノラマサウンドバー製品、ボーズホームエンターテイメントスピーカーウルトラを選択しました。 (写真出典: Lei Technology 撮影) 一般に、「本来の」ドルビーアトモス効果を体験したい場合は、測定および校正されたサラウンドサウンド + 天井を自宅に設置する必要があります。

iPhoneのApple Musicでプレイリストを並べ替える方法 Feb 07, 2024 pm 10:33 PM

Apple Music では、プレイリストに表示される曲の順序を並べ替える機能が提供されるようになりました。曲のタイトル、アーティスト、アルバム、リリース日に基づいてプレイリストを並べ替えることができます。この機能は、自分で作成したプレイリストだけでなく、Apple Music のすべてのプレイリストで動作します。この記事では、iPhoneのAppleMusicでプレイリスト内の曲を並べ替える方法を解説します。 iPhone の AppleMusic のプレイリスト内の曲を並べ替える方法以下の手順に従って、AppleMusic のプレイリスト内の曲を好みに応じて並べ替えることができます。 iPhone でプレイリスト内の曲を並べ替えるには

Realtek High-Definition Audio Managerでマイクを設定する方法 Jan 02, 2024 am 09:33 AM

win10システムは、さまざまな設定や調整を行うことができるシステムですが、今日は、編集者がrealtek High-Definition Audio Managerでマイクを設定する方法についての解決策をお届けします。興味のある方はぜひ見に来てください。 Realtek High-Definition Audio Manager でマイクを設定する方法: 1. デスクトップの左下隅にある隠しアイコンの表示で「Realtek High-Definition Audio Manager」アイコンを見つけます。 2. クリックしてインターフェイスに入ります。最初に表示されるのは「スピーカーページ」です。このインターフェイスでは、スピーカー設定を通じてスピーカーサウンドを調整できます。 3. 次に効果音ですが、「イコライザー、ポップ、ロック、クラブ」など、お好みの効果音環境を選択できます。 4. 次に室内の音質補正です。室内空間補正では「」のみ補正できます。

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

Windows 11 のオーディオ拡張機能を有効にする方法 Jan 26, 2024 am 10:54 AM

一部の友人は、コンピューターのサウンドを最大にしても音量が小さすぎると報告していますが、この時点では、システムの拡張オーディオ機能をオンにすることができます。、エディターが詳細な紹介をします。必要な友人は、Win11 で拡張オーディオを有効にする方法を参照してください。開く方法: 1. 左下隅のタスクバーの「スタート」を右クリックし、オプションリストで「設定」を選択します。 2. 新しいインターフェースに入ったら、「システム」の「サウンド」オプションをクリックします。 3. 次に、「詳細設定」の「すべてのサウンドデバイス」をクリックします。 4. 次に、「出力デバイス」で「ヘッドフォン」または「スピーカー」を選択します。 5. 最後に、「拡張オーディオ」を見つけて、その右側にあるスイッチボタンをオンにします。

Realtek HD オーディオドライバーのインストールがエラー 0x00005b3 で失敗しました Feb 19, 2024 am 10:42 AM

Windows 11/10 PC で RealtekHD オーディオドライバーの障害エラーコード 0x00005b3 が発生した場合は、次の手順を参照して問題を解決してください。トラブルシューティングとエラーの解決についてご案内します。エラーコード 0x00005b3 は、オーディオドライバーのインストールの問題が原因で発生する可能性があります。現在のドライバーが破損しているか部分的にアンインストールされており、新しいドライバーのインストールに影響を与えている可能性があります。この問題は、ディスク容量の不足や、Windows のバージョンと互換性のないオーディオドライバーが原因で発生することもあります。 RealtekHD オーディオドライバーのインストールに失敗しました。！ [エラーコード: 0x00005B3] Realtek オーディオドライバーのインストールウィザードに問題がある場合は、読み続けてください。

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

See all articles

プレイリストを使用した音楽プレーヤーの JavaScript 実装の例 Sharing_JavaScript スキル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック