Soundcloud API 不适用于带有 JS 控件的自定义 HTML5 音频播放器，可与 HTML5 控件一起使用

Question

所以 here 是 fiddle 我的问题所在。如您所见，通过 SoundCloud 流式传输歌曲与使用内置控件的 HTML5 音频播放器配合使用。但是，如果我尝试在使用自定义控件的 HTML5 音频播放器上使用它，这将不起作用。

如果播放不是通过 SoundCloud API 流式传输的歌曲，我的自定义控件会起作用，就像我使用我拥有实际文件 (proof) 的歌曲一样。所以它与流式传输有关，我不确定是什么。

和 advice/pointing 在正确的方向将不胜感激！！！我怀疑它与实际播放按钮有关，因为正在保存自定义 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 中的 "Frameworks & Extensions" 设置更改为 "No wrap - in body"，您的代码即可运行。

请参考这个jsFiddle

在提供 HTML 文件时解决此问题的最简单方法是在所有其他 dom 元素之后包含包含此代码的脚本标记。

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

我已经对此进行了测试，如果您在 HTML 文件末尾包含脚本标记，您的代码将运行无需任何修改。

Soundcloud API 不适用于带有 JS 控件的自定义 HTML5 音频播放器，可与 HTML5 控件一起使用

Soundcloud API not working with custom HTML5 audio player with JS controls, works with HTML5 controls

javascript

html

audio

soundcloud