javascript - Soundcloud API 不适用于带有 JS 控件的自定义 HTML5 音频播放器，但适用于 HTML5 控件

Question

所以here是我的问题所在的 fiddle 。如您所见，通过 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 对象“music”、“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 文件末尾包含 script 标记，您的代码将无需任何修改即可运行。