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文件的末尾包含脚本标记，您的代码将无需任何修改即可运行。