上班線上聽歌 [MP3]
上班線上聽歌 [MP3]
資料來源: https://gemini.google.com/share/a3d395235a09
線上程式: http://jashliao.eu/office_mp3/
code
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上班MP3隨機播放程式器 - 最終完整版</title>
<style>
/* 基本樣式設定 */
body {
font-family: "Microsoft JhengHei", sans-serif;
text-align: center;
background-color: #1a1a1a;
color: white;
padding: 30px 10px;
margin: 0;
}
/* 主容器：解決寬度溢出與置中問題 */
#statusBox {
margin: 0 auto;
padding: 20px;
background: #2a2a2a;
border-radius: 12px;
display: block;
max-width: 400px; /* 限制寬度在手機與電腦都美觀 */
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
box-sizing: border-box; /* 確保內距不撐破寬度 */
}
/* 主啟動按鈕 */
#playButton {
width: 100%;
box-sizing: border-box;
padding: 20px;
background-color: #444;
color: #888;
font-size: 20px;
font-weight: bold;
border-radius: 10px;
cursor: not-allowed;
margin-bottom: 15px;
border: 2px solid #333;
transition: all 0.3s;
}
/* 準備就緒時的樣式 */
#playButton.ready {
background-color: #ff0000;
color: white;
cursor: pointer;
border: 2px solid #ff5555;
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}
/* 按鈕群組排版 */
.controls-row {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.btn-sm {
flex: 1;
padding: 12px 2px;
background-color: #3d3d3d;
color: white;
border: 1px solid #555;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: 0.2s;
}
.btn-sm:hover { background-color: #555; }
.btn-blue { background-color: #0066cc; border-color: #0077ff; }
.btn-blue:hover { background-color: #0055bb; }
.btn-vol { background-color: #444; color: #ffcc00; }
/* 資訊面板 */
.info-panel {
text-align: left;
font-size: 14px;
background: #1e1e1e;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
line-height: 1.8;
box-sizing: border-box;
}
.highlight { color: #00ff00; font-weight: bold; }
.vol-highlight { color: #ffcc00; font-weight: bold; }
/* 原生播放器樣式 */
audio {
width: 100%;
filter: invert(0.8) hue-rotate(180deg);
margin-top: 5px;
}
</style>
</head>
<body>
<h2 style="margin-bottom: 20px;">上班MP3隨機播放程式</h2>
<div id="statusBox">
<button id="playButton">等待音檔載入...</button>
<div class="controls-row">
<button class="btn-sm" id="btnBack">⏮ 倒退 10s</button>
<button class="btn-sm btn-blue" id="btnNext">⏭ 下一首</button>
<button class="btn-sm" id="btnForward">快進 10s ⏭</button>
</div>
<div class="controls-row">
<button class="btn-sm btn-vol" id="volDown">🔉 音量 -</button>
<button class="btn-sm btn-vol" id="volUp">🔊 音量 +</button>
</div>
<div class="info-panel">
目前歌曲：<span id="currentTrack" class="highlight">-</span><br>
檔案長度：<span id="durationText" class="highlight">讀取中</span><br>
目前音量：<span id="volText" class="vol-highlight">100%</span>
</div>
<div id="audioContainer"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
// 1. 設定音檔來源與基礎資料
var rawBase = "https://raw.githubusercontent.com/jash-git/Wu-Bai-China-Blue-mp3_20220814/main/";
var files = ["00.mp3", "01.mp3", "02.mp3", "03.mp3", "04.mp3", "05.mp3", "06.mp3", "07.mp3", "08.mp3", "09.mp3"];
var playlist = files.map(f => rawBase + f);
var myAudio = new Audio();
var isFirstTrack = true;
// 2. 隨機洗牌函數 (Fisher-Yates Shuffle)
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// 3. 載入歌曲函數
function loadTrack() {
if (playlist.length === 0) {
$('#playButton').removeClass('ready').text("全部播放完畢").prop('disabled', true);
$('#currentTrack').text("無歌曲");
return;
}
let nextUrl = playlist.pop();
let fileName = nextUrl.split('/').pop();
$('#currentTrack').text(fileName);
$('#durationText').text("正在取得長度...");
myAudio.src = nextUrl;
myAudio.load();
}
// 4. 當音檔中繼資料(長度)載入完成時
myAudio.onloadedmetadata = function() {
let dur = Math.floor(myAudio.duration);
let mins = Math.floor(dur / 60);
let secs = dur % 60;
$('#durationText').text(mins + " 分 " + (secs < 10 ? "0" + secs : secs) + " 秒");
if (isFirstTrack) {
// 第一首歌載入後，啟用紅色點擊按鈕
$('#playButton').addClass('ready').text("▶ 點擊開始播放");
} else {
// 之後的歌曲自動播放
myAudio.play();
$('#playButton').text("🎵 正在播放中...");
}
};
// 5. 音量顯示更新
function updateVolText() {
let vol = Math.round(myAudio.volume * 100);
$('#volText').text(vol + "%");
}
$(document).ready(function() {
// 初始化原生播放器
myAudio.controls = true;
document.getElementById("audioContainer").appendChild(myAudio);
shuffle(playlist);
loadTrack();
// --- 事件監聽 ---
// 主播放啟動按鈕
$('#playButton').on('click', function() {
if ($(this).hasClass('ready')) {
myAudio.play();
$(this).text("🎵 正在播放中...");
isFirstTrack = false;
}
});
// 下一首
$('#btnNext').on('click', function() {
isFirstTrack = false;
loadTrack();
});
// 快進與倒退
$('#btnBack').on('click', function() {
myAudio.currentTime = Math.max(0, myAudio.currentTime - 10);
});
$('#btnForward').on('click', function() {
myAudio.currentTime = Math.min(myAudio.duration, myAudio.currentTime + 10);
});
// 音量調整
$('#volUp').on('click', function() {
myAudio.volume = Math.min(1, myAudio.volume + 0.1);
updateVolText();
});
$('#volDown').on('click', function() {
myAudio.volume = Math.max(0, myAudio.volume - 0.1);
updateVolText();
});
// 自動續播
myAudio.onended = function() {
loadTrack();
};
});
</script>
</body>
</html>
3 thoughts on “上班線上聽歌 [MP3]”
《韓劇主題曲鋼琴》合輯︱KPOP︱SEVEN︱德魯納酒店︱鬼怪︱擁抱太陽的月亮︱社內相親︱愛的迫降︱︱放鬆&讀書&工作用︱韓劇鋼琴系列24︱
昨晚睡覺時 忽然間靈光一閃 想著可否讓他在無網路的情況下也能動作
經過一早的實驗 終於實驗成功 爽阿 趕快又建立一個GITHUB 有需要請自取: https://github.com/jash-git/WINDOWS-Android-HTML-mp3-player
PS 當初就是看到youtube music premium廣告才有開發這玩具的衝動
整理了幾個進階優化建議與功能補充 + 問『為何在WINDOWS 可以不用WEB SERVER 透過該程式 撥放 該程式同層的MP3為何在ANDROID 卻不行』
https://gemini.google.com/share/abf5abe541a1