Javaに関する様々な情報をご紹介します。

Javaに関する様々な情報をご紹介します。
評価

0

再生中の曲がわかるようにしたい。

曲名をクリックでその曲を流す、ボタンで停止と再生、そこまでは出来ているのですが、
再生中の曲名の横にnow playingと表記が出るように(または、再生中のタイトルの色が変わる等でも良いのですが)して、どれが再生中なのかわかるようにしたいです。
以下に記載のものはjavaのサンプルコードを載せているサイトからコピペして、思っている状態にだいぶ近づいているのですがあと一歩がわかりません。

方法を探しているのですが、音声の再生・停止・音声のコントロールについてのものが多く、なかなか見つけられません。
どんなコードをどこに書けばいいのか、どなたか知識のある方、ご教授お願いします。


<section><ul><div align="left" style="margin-left:300px">
<div id="playListArea"></div></section></ul></div><br>
<div id="controller">
<img src="画像.png" id="playButton">
<div id="ctime">0:00</div>
        </div>
<style>
section ul {
list-style-position: inside;
list-style-image: url(アイコン.png);


</style>
<script>

var fileList = [
{ name :'曲名', url : '音声ファイル.mp3' },
{ name :'曲名1', url : '音声ファイル1.mp3' },
{ name :'曲名2', url : '音声ファイル2.mp3' },
{ name :'曲名3', url : '音声ファイル3.mp3' },
   
];

var audioObj = new Audio()
var playFlag = false;

var playList = '<ul >';
for(var i=0; i<fileList.length; i++){
    playList += '<li onclick=start_music("'+fileList[i].url+'")>';
    playList += fileList[i].name + '</li>';
}
playList += '</ul>';
document.getElementById('playListArea').innerHTML = playList;

// 再生開始
function start_music(url){
    audioObj.pause(); 
    audioObj = new Audio(url);
    audioObj.play();
    audioObj.addEventListener('timeupdate', function(){
        var sec = '0' + Math.floor(audioObj.currentTime % 60);  // 秒数
        var min = '0' + Math.floor(audioObj.currentTime / 60);  // 分数
        sec = sec.substr(sec.length-2, 2);
        min = min.substr(min.length-2, 2);
        var totalSec = '0' + Math.floor(audioObj.duration % 60);    // 秒数
        var totalMin = '0' + Math.floor(audioObj.duration / 60);    // 分数
        totalSec = totalSec.substr(totalSec.length-2, 2);
        totalMin = totalMin.substr(totalMin.length-2, 2);
        crtTime.innerHTML = min+":"+sec+' ['+ totalMin+':'+totalSec +']';
    }, true);
    playFlag = true;    
    pButton.src = 'アイコン.png';

}
var crtTime = document.getElementById('ctime');
var pButton = document.getElementById('playButton');

pButton.addEventListener('click', function(){
    if (playFlag == false){
        playFlag = true;   
        audioObj.play();
        pButton.src = 'img1.png';
    }else{
        playFlag = false;
        audioObj.pause();
        pButton.src = 'img.png';
    }
}, true);
</script>

3

回答

28982

閲覧

3件の回答

評価

30

それはJavaではなく、JavaScriptなんだ。
JavaScriptのDOM、イベント、スタイル(CSS)についての勉強をしないといけない。

評価

0

匿名さん、ありがとうございました。
急ぎだったので、サイトを見ながらやりたいことを検索して…という基礎も勉強せずにかなり無謀なことを行っておりました。
JavaとJavascriptの違いすらわからずに、Javaのサイトで質問したのが恥ずかしいです。。
ありがとうございました。

評価

0

済まないね。
個人的な縛りだけど、場違いになると思うから、Javaと両方関係するのでない限り答えないようにしてる。

ちなみにその混同はとても一般的なので、気にしないでいい。

他で答えを得られたのかどうかのか判らないけど、無謀かなと思えるくらいのことをやる方がいいよ。
安易なものを100本作るよりも、難しいものに挑戦して1本作る方が力になる。

質問から6ヶ月以上経過しているので、回答を書き込むことはできません。