如何使用HTML，CSS和JS製作基於音頻標籤的自定義音樂播放器

Question

我試圖在不使用音頻標籤內的「控件」標籤的情況下製作自定義音樂播放器。首先，我想創建類似於SCM音樂播放器的東西。我不會使用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"; 
    } 

} 

我已經看過這個計算器上的很多問題，但我仍然沒有找到答案，我想要做的事。

• 我怎樣才能檢索到的播放源文件的標題？ （更新）

• 我如何編寫的「左」和「右」按鈕來更改源文件？

• 如何創建音量滑塊？

• 如何創建當前正在播放的音頻的時間線？

• 最後，如何顯示當前時間和正在播放的音頻的整個持續時間？

如何在此使用currentTime和duration屬性。

Answer 1

我的理解是你想爲你的特定用例構建一個自定義庫。我建議你試試Mediaelement.js。它有很多功能，並且幾乎適用於所有瀏覽器。此外，基於next和prev的歌曲可以添加在這個庫的頂部，因爲這個庫是開源的。

即使我已經使用它並在它上面創建了一些自定義功能。 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