HTML、CSS、JSでオーディオタグに基づいてカスタムミュージックプレーヤーを作成する方法

Question

オーディオタグ内の「controls」タグを使用せずにカスタムミュージックプレーヤーを作成しようとしています。まず、私はSCM Music Playerに似たものを作りたいと思っています。私はSCMで提供されているものを使用しません。なぜなら、私のウェブサイトに追加されたときに何とか大量のスペースが使用されるからです。スクリプトタグ内にあるので隠す/表示する方法を理解していません。 Y-Slowスピードに影響します。ここで

私が作りたいもののイメージは次のとおりです。

そして、これは私がこれまで持っているものです：https://jsfiddle.net/e13gs8qg/6/（更新）

HTML：（更新）

<audio id="player" class="mediaplayerclass"> 
    <source title="Fruity Loops Own Track Copy" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3" /> 
    <source title="Fruity Loops Own Track Copy 2" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3" /> 
</audio> 

<div class="playermenuwrapper"> 
    <button id="previoussong" class="previoussongclass"> 
     Previous 
    </button> 
    <button id="playpause" class="playpauseclass"> 
     play 
    </button> 
    <button id="nextsong" class="nextsongclass"> 
     Next 
    </button> 
    <div id="songtitle" class="titleclass"></div> 
</div> 

CSS：

.playermenuwrapper { 
    text-align:center; 
    margin: 0px auto; 
    max-width:100%; 
} 
.previoussongclass { 
    display:inline-block; 
    width:80px; 
} 

.playpauseclass { 
    display:inline-block; 
    width:80px; 
} 

.nextsongclass { 
    display:inline-block; 
    width:80px; 
} 

.mediaplayerclass { 
    display:block; 
    width:150px; 
    height:50px; 
    margin: 0px auto; 
} 
.titleclass { 
    display:inline-block; 
    text-align:center; 
    margin: 0px auto; 
    width:250px; 
} 

JS：（更新）

window.player = document.getElementById('player'); 
var playpause = document.getElementById('playpause'); 
var songtitle = document.getElementById('songtitle'); 
changesongtitle(); 
player.volume = 0.3; 

playpause.onclick = function() { 

    if (player.paused) { 
     changesongtitle(); 
     player.play(); 
     playpause.innerHTML = 'pause'; 

    } else { 
     player.pause(); 
     playpause.innerHTML = 'play'; 
     changesongtitle(); 
    } 
} 

function changesongtitle() { 

    var songtitle = document.getElementById('songtitle'); 

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3") { 
    songtitle.innerHTML = "Fruity Loops Own Track Copy"; 
    } 

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3") { 
    songtitle.innerHTML = "Fruity Loops Own Track Copy 2"; 
    } 

} 

私はこの上のstackoverflowの上で多くの質問を見てきましたが、私はまだ私がやろうとしているものに答えを見つけていません。私は演奏ソースファイルのタイトルを取得するにはどうすればよい

• ？ （更新）

• どのように私は、ソースファイルを変更するには、「左」と「右」ボタンをコーディングすることができますか？

• ボリュームスライダを作成するにはどうすればよいですか？

• 現在再生中のオーディオのタイムラインを作成するにはどうすればよいですか？

• 最後に、再生中のオーディオの現在の時間と再生時間を表示するにはどうすればよいですか？

ここでcurrentTimeとdurationのプロパティを使用する方法。

Answer 1

私が理解していることは、特定のユースケース用のカスタムライブラリを作成したいということです。 Mediaelement.jsを試してみることをお勧めします。それは多くの機能を持ち、ほとんどすべてのブラウザで動作します。また、このライブラリがオープンソースであるため、このライブラリの上に次の曲や前の曲に基づいて曲を変更するようなことはほとんどありません。

私はそれを使用して、その上にカスタム機能をいくつか作成しました。 https://github.com/hkasera/mediaelement-markers

しかしこれまでに、HTML5のオーディオやビデオの仕組みを理解する必要があります。そのために私は以下の記事を読むことをお勧めします：

1. http://html5doctor.com/html5-audio-the-state-of-play/
2. http://www.html5rocks.com/en/tutorials/webaudio/intro/
3. https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Cross-browser_audio_basics