【播放器 H5 多曲 明码】

<div id="msgbodyContent"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
	<style> table{ background-color:transparent; margin-left: 0px !important; } td { background-color:transparent; }
	body {
	margin-top: 20px;
	}
	#postbody { width: 1024px !important; overflow: visible; padding: 0px; background: transparent !important; } .transp { filter:alpha(opacity=50); -moz-opacity:0.8; opacity:0.8; }
	.jumbotron {
	background-color: #CCFFFF;
	}
	h1 {
	font-family: Lobster, Monospace;
	font-size: 100px;
	}
	h3 {
	font-family: Lobster, Monospace;
	font-size: 25px;
	}
	.smaller-image {
	width: 100%;
	height:100%;
	padding: 5% 5% 2% 5%;
	display: block;
	margin: 0 auto;
	}
	h4{
	font-family: Lobster, Monospace;
	font-size: 33px;
	}
	#NS_69 {
	margin-top: 25px;
	border-style: solid;
	border-width: medium;
	}
	#back-info-pic{
	margin-top:40px;
	}
	#back-info{
	margin-top:5%;
	font-size:1.3em;
	}
	#facts{
	margin-top:35px;
	}
	/* Player */
	#myProgress {
	width: 640px;
	background-color: #d9d9f2;
	cursor: pointer;
	border-radius: 10px;
	}
	#myBar {
	width: 0%;
	height: 5px;
	background-color: #ffc266;
	border-radius: 10px;
	}
	.logo {
	fill: red;
	}
	.btn-action{
	cursor: pointer;
	padding-top: 10px;
	width: 30px;
	}
	.btn-ctn, .infos-ctn{
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.infos-ctn{
	padding-top: 20px;
	}
	.btn-ctn > div {
	padding: 5px;
	margin-top: 18px;
	margin-bottom: 18px;
	}
	.infos-ctn > div {
	margin-bottom: 8px;
	color: #ffc266;
	}
	.first-btn{
	margin-left: 3px;
	}
	.duration{
	margin-left: 10px;
	}
	.heading{
	font-size: 15px;
	font-weight: bold;
	color: #ffc266;
	margin-left: 10px;
	width: 520px;
	text-align: center;
	}
	.player-ctn{
	border-radius: 15px;
	width: 640px;
	padding: 10px;
	background-color: #373737;
	margin:auto;
	margin-top: 100px;
	}
	.playlist-track-ctn{
	display: flex;
	background-color: #464646;
	margin-top: 3px;
	border-radius: 5px;
	cursor: pointer;
	}
	.playlist-track-ctn:last-child{
	/*border: 1px solid #ffc266; */
	}
	.playlist-track-ctn > div{
	margin:10px;
	}
	.playlist-info-track{
	width: 80%;
	}
	.playlist-info-track,.playlist-duration{
	padding-top: 7px;
	padding-bottom: 7px;
	color: #e9cc95;
	font-size: 13px;
	pointer-events: none;
	}
	.playlist-ctn{
	padding-bottom: 20px;
	height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
	}
	.active-track{
	background: #4d4d4d;
	color: #ffc266 !important;
	font-weight: bold;
	}
	.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
	color: #ffc266 !important;
	}
	.playlist-btn-play{
	pointer-events: none;
	padding-top: 5px;
	padding-bottom: 5px;
	}
	.fas{
	color: #ffc266;
	font-size: 20px;
	}
	/*scrollbar美化*/
	::-webkit-scrollbar{width:6px;height:6px}
	::-webkit-scrollbar-button:vertical{display:none}
	::-webkit-scrollbar-track:vertical{background-color:transparent;}
	::-webkit-scrollbar-track-piece{background-color:transparent;}
	::-webkit-scrollbar-thumb:vertical{background-color:#efb660;border-radius:6px}
	::-webkit-scrollbar-thumb:vertical:hover,
	::-webkit-scrollbar-thumb:vertical:active {background-color: #ffc266}
	</style>
	<div class="container-fluid">
	<div class="row">
	<div class="col-md-12">
	<div class="jumbotron">
	<h1 class="text-center"><strong><u>Nina Simone</u></strong></h1>
	<h3 class="text-center"><em>The High Priestess of Soul</em></h3>
	<img class="smaller-image" src="https://www.ahcacmiami.org/wp-content/uploads/2015/11/2016_MusicNinaSimone.jpg" alt="Nina Simone">
	<div class="text-center">Stylised picture of Nina Simone</div>
	<div class="row" id="back-info-pic">
	<div class="col-xs-6"><img id="NS_69" src="https://www.wenxuecity.com/upload/album/cb/e7/b2/cc9e62352660cf4WMC3r.jpg" alt="Nina Simone in 1969">
	<div>Nina Simone in 1969</div>
	</div>
	<div class="col-xs-6" id="back-info">
	<h4>Background Information</h4>
	<div id="back-text"><strong><ul>
	<li><u>Birthname:</u> 為你著迷 / I Put A Spell On You</li>
	<li><u>Born:</u> 妮娜．席夢 Nina Simone</li>
	<li><u>Died:</u> 1965/2013</li>
	<li><u>Occupation:</u> Vocal, Singer, Jazz, Pop</li>
	<li><u>發行公司:</u> Verve Music</li>
	</ui></strong> </div>
	</div>
	</div>
	<h4 id="facts">Interesting Nina Simone Facts</h4>
	*滾石四顆星超優評價!!!! AMG 3顆星優選評價！<br>
	*用歌聲拆解愛情裡各種不同的面貌，一代歌姬至今令人難以忘情的傳世經典
	<br><br>
	這是妮娜為Philips唱片公司在1960年代中期所灌錄眾多專輯中非常特別的一張，是她最為傾向流行歌曲的專輯之一，在選曲部分，一向標榜人權歌手的妮娜?西蒙這次沒有自己的創作，而選擇了許多法國香頌，包括國寶級的作曲家Charles Aznavour的“Tomorrow is My Turn"與“You’ve Got to Learn"，Jacques Brel的“Ne Me Quitte Pas"〈不要離開我〉等經典曲目。其中“Ne Me Quitte Pas"用法文演唱，如泣如訴，將愛情裡最悲傷的面貌赤裸呈現。
	<br><br>
	整張專輯裡談的不外乎愛情二字，而且是苦戀、慾望與佔有等較為極端的情緒。標題曲“I Put a Spell on You"是爵士弦民謠版Screamin’Jay Hawkins歌曲的翻唱，明顯透露出愛情貪婪的面目，而既然要表現出愛情的張力，編曲當然也得充滿戲劇效果，於是每首曲子不論是由Hal Mooney率領的大樂團伴奏，或是小編制，通通是曲折迭盪，起伏離奇，而聽者的情緒也被帶著上上下下，極度起伏。
	<div id="link">
	<h4>To find out more information, and to listen to some of Nina Simone's music, check out the <a href="http://www.ninasimone.com/" target="_blank"> official Nina Simone website!</a></h4>
	<audio id="myAudio" autoplay ontimeupdate="onTimeUpdate()">
	<source id="source-audio" src="" type="audio/mpeg">
	Your browser does not support the audio element.
	</audio>
	<div class="player-ctn">
	<div class="infos-ctn">
	<div class="timer">00:00</div>
	<div class="heading"></div>
	<div class="duration">00:00</div>
	</div>
	<div id="myProgress">
	<div id="myBar"></div>
	</div>
	<div class="btn-ctn">
	<div class="btn-action first-btn" onclick="previous()">
	<div id="btn-faws-back">
	<i class='fas fa-step-backward'></i>
	</div>
	</div>
	<div class="btn-action" onclick="rewind()">
	<div id="btn-faws-rewind">
	<i class='fas fa-backward'></i>
	</div>
	</div>
	<div class="btn-action" onclick="toggleAudio()">
	<div id="btn-faws-play-pause">
	<i class='fas fa-play' id="icon-play"></i>
	<i class='fas fa-pause' id="icon-pause" style="display: none"></i>
	</div>
	</div>
	<div class="btn-play" onclick="forward()">
	<div id="btn-faws-forward">
	<i class='fas fa-forward'></i>
	</div>
	</div>
	<div class="btn-action" onclick="next()">
	<div id="btn-faws-next">
	<i class='fas fa-step-forward'></i>
	</div>
	</div>
	<div class="btn-mute" id="toggleMute" onclick="toggleMute()">
	<div id="btn-faws-volume">
	<i id="icon-vol-up" class='fas fa-volume-up'></i>
	<i id="icon-vol-mute" class='fas fa-volume-mute' style="display: none"></i>
	</div>
	</div>
	</div>
	<div class="playlist-ctn"></div>
	</div>
	<center>
	<br />
	<br />
	----- all music copyrighted please purchase original materials -----<br />
	----- 所有的音樂只是試聽音質請購買原裝版本 -----
	<br />
	<br />
	</center>
	<script src="https://cdn.jsdelivr.net/gh/lauzon1999/music/stopExecutionOnTimeout.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/lauzon1999/music/a062562745.js"></script>
	<script id="rendered-js">
	function createTrackItem(index, name, duration) {
	var trackItem = document.createElement('div');
	trackItem.setAttribute("class", "playlist-track-ctn");
	trackItem.setAttribute("id", "ptc-" + index);
	trackItem.setAttribute("data-index", index);
	document.querySelector(".playlist-ctn").appendChild(trackItem);
	var playBtnItem = document.createElement('div');
	playBtnItem.setAttribute("class", "playlist-btn-play");
	playBtnItem.setAttribute("id", "pbp-" + index);
	document.querySelector("#ptc-" + index).appendChild(playBtnItem);
	var btnImg = document.createElement('i');
	btnImg.setAttribute("class", "fas fa-play");
	btnImg.setAttribute("height", "40");
	btnImg.setAttribute("width", "40");
	btnImg.setAttribute("id", "p-img-" + index);
	document.querySelector("#pbp-" + index).appendChild(btnImg);
	var trackInfoItem = document.createElement('div');
	trackInfoItem.setAttribute("class", "playlist-info-track");
	trackInfoItem.innerHTML = name;
	document.querySelector("#ptc-" + index).appendChild(trackInfoItem);
	var trackDurationItem = document.createElement('div');
	trackDurationItem.setAttribute("class", "playlist-duration");
	trackDurationItem.innerHTML = duration;
	document.querySelector("#ptc-" + index).appendChild(trackDurationItem);
	}
	var listAudio = [
	{
	name: "La Primavera (Spring) Op. 8 No. 1 in D major- I. Allegro",
	file: "http://cdn.wenxuecity.com/upload/media/61/b7/af/xTdrNOKc9580.mp3",
	duration: "03:15" },
	{
	name: "La Primavera (Spring) Op. 8 No. 1 in D major- II. Largo",
	file: "http://cdn.wenxuecity.com/upload/media/7e/d5/a5/8CdlS5z49640.mp3",
	duration: "02:39" },
	{
	name: "La Primavera (Spring) Op. 8 No. 1 in D major- III. Allegro",
	file: "http://cdn.wenxuecity.com/upload/media/06/51/4c/YprToaVO9693.mp3",
	duration: "03:40" },
	{
	name: "L'Estate (Summer) Op. 8 No. 2 in G minor- I. Allegro non molto",
	file: "http://cdn.wenxuecity.com/upload/media/cc/34/87/HTzqhLgc9738.mp3",
	duration: "05:09" },
	{
	name: "L'Estate (Summer) Op. 8 No. 2 in G minor- II. Adagio - Presto",
	file: "http://cdn.wenxuecity.com/upload/media/72/98/cd/T47azPu59777.mp3",
	duration: "02:09" },
	{
	name: "L'Estate (Summer) Op. 8 No. 2 in G minor- III. Presto",
	file: "http://cdn.wenxuecity.com/upload/media/c5/c3/39/jsoyrwDt9816.mp3",
	duration: "02:26" },
	{
	name: "L'Autunno (Autumn) Op. 8 No. 3 in F major- I. Allegro",
	file: "http://cdn.wenxuecity.com/upload/media/7d/00/81/6RkLmMrq9867.mp3",
	duration: "04:45" },
	{
	name: "L'Autunno (Autumn) Op. 8 No. 3 in F major- II. Adagio",
	file: "http://cdn.wenxuecity.com/upload/media/83/e6/fb/hT01hKzc9909.mp3",
	duration: "03:10" },
	{
	name: "L'Autunno (Autumn) Op. 8 No. 3 in F major- III. Allegro",
	file: "http://cdn.wenxuecity.com/upload/media/93/e7/05/E19bkOTs9949.mp3",
	duration: "03:05" },
	{
	name: "L'Inverno (Winter) Op. 8 No. 4 in F minor- I. Allegro",
	file: "http://cdn.wenxuecity.com/upload/media/03/89/86/mRByEe4x9997.mp3",
	duration: "03:10" },
	{
	name: "L'Inverno (Winter) Op. 8 No. 4 in F minor- II. Largo",
	file: "http://cdn.wenxuecity.com/upload/media/74/e9/a7/327imyXq0048.mp3",
	duration: "01:54" },
	{
	name: "L'Inverno (Winter) Op. 8 No. 4 in F minor- III. Allegro",
	file: "http://cdn.wenxuecity.com/upload/media/70/ec/01/3qUSLsKN0087.mp3",
	duration: "03:05" }];
	for (var i = 0; i < listAudio.length; i++) {if (window.CP.shouldStopExecution(0)) break;
	createTrackItem(i, listAudio[i].name, listAudio[i].duration);
	}window.CP.exitedLoop(0);
	var indexAudio = 0;
	function loadNewTrack(index) {
	var player = document.querySelector('#source-audio');
	player.src = listAudio[index].file;
	document.querySelector('.heading').innerHTML = listAudio[index].name;
	this.currentAudio = document.getElementById("myAudio");
	this.currentAudio.load();
	this.toggleAudio();
	this.updateStylePlaylist(this.indexAudio, index);
	this.indexAudio = index;
	}
	var playListItems = document.querySelectorAll(".playlist-track-ctn");
	for (let i = 0; i < playListItems.length; i++) {if (window.CP.shouldStopExecution(1)) break;
	playListItems[i].addEventListener("click", getClickedElement.bind(this));
	}window.CP.exitedLoop(1);
	function getClickedElement(event) {
	for (let i = 0; i < playListItems.length; i++) {if (window.CP.shouldStopExecution(2)) break;
	if (playListItems[i] == event.target) {
	var clickedIndex = event.target.getAttribute("data-index");
	if (clickedIndex == this.indexAudio) {// alert('Same audio');
	this.toggleAudio();
	} else {
	loadNewTrack(clickedIndex);
	}
	}
	}window.CP.exitedLoop(2);
	}
	document.querySelector('#source-audio').src = listAudio[indexAudio].file;
	document.querySelector('.heading').innerHTML = listAudio[indexAudio].name;
	var currentAudio = document.getElementById("myAudio");
	currentAudio.load();
	currentAudio.onloadedmetadata = function () {
	document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration);
	}.bind(this);
	var interval1;
	function toggleAudio() {
	if (this.currentAudio.paused) {
	document.querySelector('#icon-play').style.display = 'none';
	document.querySelector('#icon-pause').style.display = 'block';
	document.querySelector('#ptc-' + this.indexAudio).classList.add("active-track");
	this.playToPause(this.indexAudio);
	this.currentAudio.play();
	} else {
	document.querySelector('#icon-play').style.display = 'block';
	document.querySelector('#icon-pause').style.display = 'none';
	this.pauseToPlay(this.indexAudio);
	this.currentAudio.pause();
	}
	}
	function pauseAudio() {
	this.currentAudio.pause();
	clearInterval(interval1);
	}
	var timer = document.getElementsByClassName('timer')[0];
	var barProgress = document.getElementById("myBar");
	var width = 0;
	function onTimeUpdate() {
	var t = this.currentAudio.currentTime;
	timer.innerHTML = this.getMinutes(t);
	this.setBarProgress();
	if (this.currentAudio.ended) {
	document.querySelector('#icon-play').style.display = 'block';
	document.querySelector('#icon-pause').style.display = 'none';
	this.pauseToPlay(this.indexAudio);
	if (this.indexAudio < listAudio.length - 1) {
	var index = parseInt(this.indexAudio) + 1;
	this.loadNewTrack(index);
	}
	}
	}
	function setBarProgress() {
	var progress = this.currentAudio.currentTime / this.currentAudio.duration * 100;
	document.getElementById("myBar").style.width = progress + "%";
	}
	function getMinutes(t) {
	var min = parseInt(parseInt(t) / 60);
	var sec = parseInt(t % 60);
	if (sec < 10) {
	sec = "0" + sec;
	}
	if (min < 10) {
	min = "0" + min;
	}
	return min + ":" + sec;
	}
	var progressbar = document.querySelector('#myProgress');
	progressbar.addEventListener("click", seek.bind(this));
	function seek(event) {
	var percent = event.offsetX / progressbar.offsetWidth;
	this.currentAudio.currentTime = percent * this.currentAudio.duration;
	barProgress.style.width = percent * 100 + "%";
	}
	function forward() {
	this.currentAudio.currentTime = this.currentAudio.currentTime + 5;
	this.setBarProgress();
	}
	function rewind() {
	this.currentAudio.currentTime = this.currentAudio.currentTime - 5;
	this.setBarProgress();
	}
	function next() {
	if (this.indexAudio < listAudio.length - 1) {
	var oldIndex = this.indexAudio;
	this.indexAudio++;
	updateStylePlaylist(oldIndex, this.indexAudio);
	this.loadNewTrack(this.indexAudio);
	}
	}
	function previous() {
	if (this.indexAudio > 0) {
	var oldIndex = this.indexAudio;
	this.indexAudio--;
	updateStylePlaylist(oldIndex, this.indexAudio);
	this.loadNewTrack(this.indexAudio);
	}
	}
	function updateStylePlaylist(oldIndex, newIndex) {
	document.querySelector('#ptc-' + oldIndex).classList.remove("active-track");
	this.pauseToPlay(oldIndex);
	document.querySelector('#ptc-' + newIndex).classList.add("active-track");
	this.playToPause(newIndex);
	}
	function playToPause(index) {
	var ele = document.querySelector('#p-img-' + index);
	ele.classList.remove("fa-play");
	ele.classList.add("fa-pause");
	}
	function pauseToPlay(index) {
	var ele = document.querySelector('#p-img-' + index);
	ele.classList.remove("fa-pause");
	ele.classList.add("fa-play");
	}
	function toggleMute() {
	var btnMute = document.querySelector('#toggleMute');
	var volUp = document.querySelector('#icon-vol-up');
	var volMute = document.querySelector('#icon-vol-mute');
	if (this.currentAudio.muted == false) {
	this.currentAudio.muted = true;
	volUp.style.display = "none";
	volMute.style.display = "block";
	} else {
	this.currentAudio.muted = false;
	volMute.style.display = "none";
	volUp.style.display = "block";
	}
	}
	//# sourceURL=pen.js
	</script>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>