Soundcloud API不支持自定義HTML5音頻播放器與JS控件，與HTML5控件一起工作

Question

因此here是我的問題是一把小提琴。如您所見，通過SoundCloud播放歌曲可使用內置控件與HTML5音頻播放器一起使用。但是，如果我嘗試在使用自定義控件的HTML5音頻播放器上使用它，這不起作用。

我的自定義控件在播放未通過SoundCloud API流式傳輸的歌曲時會起作用，就像我使用的歌曲有我的實際文件（proof）。所以它與流媒體有關，我不知道是什麼。

建議/指向正確的方向將不勝感激！我懷疑它與實際的播放按鈕有關，因爲自定義HTML5音頻播放器中的歌曲長度正在保存，您可以移動歌曲的播放器。我只是不知道JS足以讓我自己想出這個。

HTML自定義音頻播放器：

<div class="posts"> 
    <div class="music-block"> 
    <div class="album-cover-wrapper"> 
     <img src="http://payload74.cargocollective.com/1/0/5464/3780629/Tame-Impala_Lonersim_800.jpg" width="200px"/> 
    </div> 
    <audio id="music" preload="true"> 
    </audio> 
    <div class="player"> 
     <div id="timeline"> 
      <div id="playhead"></div> 
     </div> 
    </div> 
    <div class="review"><button id="pButton" class="play" onclick="play()"></button></div> 
    <div class="song-info"></div> 
    </div> 
</div> 

JavaScript進行自定義音頻播放器：

var music = document.getElementById('music'); // id for audio element 
var duration; // Duration of audio clip 
var pButton = document.getElementById('pButton'); // play button 

var playhead = document.getElementById('playhead'); // playhead 

var timeline = document.getElementById('timeline'); // timeline 
// timeline width adjusted for playhead 
var timelineWidth = 225; 

// timeupdate event listener 
music.addEventListener("timeupdate", timeUpdate, false); 

//Makes timeline clickable 
timeline.addEventListener("click", function (event) { 
    moveplayhead(event); 
    music.currentTime = duration * clickPercent(event); 
}, false); 

// returns click as decimal of the total timelineWidth 
function clickPercent(e) { 
    return (e.pageX - timeline.offsetLeft)/timelineWidth; 
} 

// Makes playhead draggable 
playhead.addEventListener('mousedown', mouseDown, false); 
window.addEventListener('mouseup', mouseUp, false); 

// Boolean value so that mouse is moved on mouseUp only when the playhead is released 
var onplayhead = false; 
function mouseDown() { 
    onplayhead = true; 
    window.addEventListener('mousemove', moveplayhead, true); 
    music.removeEventListener('timeupdate', timeUpdate, false); 
} 

// getting input from all mouse clicks 
function mouseUp(e) { 
    if (onplayhead == true) { 
     moveplayhead(e); 
     window.removeEventListener('mousemove', moveplayhead, true); 
     music.currentTime = duration * clickPercent(e); 
     music.addEventListener('timeupdate', timeUpdate, false); 
    } 
    onplayhead = false; 
} 


// Moves playhead as user drags 
function moveplayhead(e) { 
    var newWidth = e.pageX - timeline.offsetLeft; 
    if (newWidth >= 0 && newWidth <= timelineWidth) { 
     playhead.style.width = newWidth + "px"; 
    } 
    if (newWidth < 0) { 
     playhead.style.width= "0px"; 
    } 
    if (newWidth > timelineWidth) { 
     playhead.style.width = timelineWidth + "px"; 
    } 
} 

// timeUpdate 

// Synchronizes playhead position with current point in audio 
function timeUpdate() { 
    var playPercent = timelineWidth * (music.currentTime/duration); 
    playhead.style.width = playPercent + "px"; 
    if (music.currentTime == duration) { 
     pButton.className = ""; 
     pButton.className = "play"; 
    } 
} 

//Play and Pause 
function play() { 
    // start music 
    if (music.paused) { 
     music.play(); 
     // remove play, add pause 
     pButton.className = ""; 
     pButton.className = "pause"; 
    } else { // pause music 
     music.pause(); 
     // remove pause, add play 
     pButton.className = ""; 
     pButton.className = "play"; 
    } 
} 

// Gets audio file duration 
music.addEventListener("canplaythrough", function() { 
    duration = music.duration; 
}, false); 

Answer 1

看來您遇到的問題是，你要創建的JavaScript對象 「音樂」，「在用於創建它們的元素已經加載到文檔之前，「pButton」等等。

var music = document.getElementById('music'); // id for audio element 

音樂創建時，dom元素不存在，因此音樂爲空。

只需將JSFiddle中的「框架&擴展」設置更改爲「無換行 - 正文」，您的代碼就可以工作。

請參閱本jsFiddle

最簡單的解決這個問題，當服務的HTML文件，包括包含所有其他的DOM元素此代碼後的腳本標籤。

<div> 
//all dom elements that make up the page 
</div> 
//Then add the script 
<script src="/js"></script> 

我已經測試過這個，如果您在HTML文件的末尾包含腳本標記，您的代碼將無需任何修改即可運行。