ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

audioをplay, pauseするfunctionの中で、playしているli要素をboldにして、textContentで渡せばいいだけですね♪♪♪

<h2>Catcher In The Light<div style="display:inline;" id="title"></div></h2>
<p><audio src="/mp3/180307112410.mp3" preload="none" onclick="playthis(1);" controls="controls"></audio></p>

<ul>
<li id="list1"><a href="javascript:playthis(1)">Catcher In The Light</a></li>
<li id="list2"><a href="javascript:playthis(2)">About You</a></li>
<li id="list3"><a href="javascript:playthis(3)">GAME</a></li>
<li id="list4"><a href="javascript:playthis(4)">my name's WOMEN</a></li>
<li id="list5"><a href="javascript:playthis(5)">WONDERLAND</a></li>
</ul>

<script type="text/javascript">

var dir = "/foo/";
// var now = " ← now playing";

var media = document.getElementsByTagName("audio")[0];

var list = new Array(5);
list[1] = "hoge.mp3";
list[2] = "hogehoge.mp3";
list[3] = "hogehogehoge.mp3";
list[4] = "hogehogehogehoge.mp3";
list[5] = "hogehogehogehogehoge.mp3";

var length = list.length;

var COOKIE = new Array();
if (document.cookie) {
	var cookies = document.cookie.split("; ");
	for (var i = 0; i < cookies.length; i++) {
		var str = cookies&#91;i&#93;.split("=");
		COOKIE&#91;str&#91;0&#93;&#93; = unescape(str&#91;1&#93;);
	}
}

var volume = isNaN(COOKIE&#91;"volume"&#93;) ? 0.5 : COOKIE&#91;"volume"&#93;;
media.volume = volume;

media.onended = function(){ 
	playnext(this.src); 
};

window.onbeforeunload = function(){ setCookie("volume", media.volume); };
</script>

<script type="text/javascript">

function playthis(key){
	media.pause();
	media.src = dir + list[key];
	media.play();

	var hoge =list[key];

    
    var tag = document.getElementById("list"+key).innerHTML;
    var title  = tag.replace(/<("&#91;^"&#93;*"|'&#91;^'&#93;*'|&#91;^'">])*>/g,'');
	var song = document.getElementById("title");
	song.textContent = " : " + title;

	// for(var i=1;i<length;i++) document.getElementById("list"+i).innerHTML = document.getElementById("list"+i).innerHTML.replace(now,"");
    for(var i=1;i<length;i++) document.getElementById("list"+i).style.fontWeight = "normal";
    document.getElementById("list"+key).style.fontWeight = "bold";
	// document.getElementById("list"+key).innerHTML += now;

	
}


function playnext(objsrc) {
	var objsrc = decodeURI(objsrc);
	objsrc = objsrc.replace("http://"+location.host,"");
	for (var i=1;i<length;i++) {
		var listsrc = dir + list&#91;i&#93;;
		if(objsrc===listsrc){
			if(length==i+1){
				document.getElementById("list"+i).innerHTML = document.getElementById("list"+i).innerHTML.replace(now,"");
				// 先頭を再生
				// playthis(1);
			}else{
				playthis(i+1);
			}
			break;
		}
	}
}

function setCookie(name, value, domain, path, expires, secure) {
	if (!name) return;
	domain = location.hostname;
	path = "/";
	expires = 30;

	var str = name + "=" + escape(value);
	if (domain) {
		if (domain == 1) domain = location.host.replace(/^&#91;^\.&#93;*/, "");
		str += "; domain=" + domain;
	}
	if (path) {
		if (path == 1) path = location.pathname;
		str += "; path=" + path;
	}
	if (expires) {
		var nowtime = new Date().getTime();
		expires = new Date(nowtime + (60 * 60 * 24 * 1000 * expires));
		expires = expires.toGMTString();
		str += "; expires=" + expires;
	}
	if (secure && location.protocol == "https:") {
		str += "; secure";
	}

	document.cookie = str;
}
</script>

fontWeightを判定します。

<p id="list1">Catcher In The Light</p>
<p id="list2">About You</p>
<p id="list3">GAME</p>
<input type="button" value="ボタン" onclick="changeFontWeight();">

<script>
function changeFontWeight(){
	var obj1 = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	var obj3 = document.getElementById("list3");
	if(obj1.style.fontWeight == "bold"){
		obj1.style.fontWeight = "normal";
		obj2.style.fontWeight = "bold";
	} else if(obj2.style.fontWeight == "bold") {
		obj2.style.fontWeight = "normal";
		obj3.style.fontWeight = "bold";
	} else if(obj3.style.fontWeight == "bold"){
		obj3.style.fontWeight = "normal";
		obj1.style.fontWeight = "bold";
	} else {
		obj1.style.fontWeight = "bold";
	}
}
</script>

変数をHTMLに渡して表示する

<h1>MyStory <div style="display:inline;" id="title"></div></h1>

<p id="list1">Catcher In The Light</p>
<p id="list2">About You</p>
<p id="list3">GAME</p>
<input type="button" value="ボタン" onclick="changeFontWeight();">

<script>
function changeFontWeight(){
	var obj1 = document.getElementById("list1");
	var obj2 = document.getElementById("list2");
	var obj3 = document.getElementById("list3");
	if(obj1.style.fontWeight == "bold"){
		obj1.style.fontWeight = "normal";
		obj2.style.fontWeight = "bold";
		list = "list2";
		

	} else if(obj2.style.fontWeight == "bold") {
		obj2.style.fontWeight = "normal";
		obj3.style.fontWeight = "bold";
		list = "list3";
	} else if(obj3.style.fontWeight == "bold"){
		obj3.style.fontWeight = "normal";
		obj1.style.fontWeight = "bold";
		list = "list1";
	} else {
		obj1.style.fontWeight = "bold";
		list = "list1";
	}
	var obj4 = document.getElementById(list).innerHTML;
	var title = document.getElementById("title");
	title.textContent = obj4
}
</script>

ボタンを押す度に、タイトルとfontWeightがboldに切り替わる。