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

我的问题也是如此。正如您所见，通过SoundCloud播放歌曲与使用内置控件的HTML5音频播放器配合使用。然而，如果我尝试在HTML5音频播放器上使用自定义控件，这是行不通的

如果播放的歌曲不是通过SoundCloud API流式传输的，我的自定义控件就可以工作，比如如果我使用的是我有实际文件的歌曲（）。所以它与流媒体有关，我不确定是什么

建议/指出正确的方向将不胜感激！！！我怀疑这与实际的播放按钮有关，因为自定义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>

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);

自定义音频播放器的Javascript：

<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>

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);

var music=document.getElementById（'music'）；//音频元素的id
风险值持续时间；//音频剪辑的持续时间
var pButton=document.getElementById（'pButton'）；//播放按钮
var playhead=document.getElementById（'playhead'）；//播放头
var timeline=document.getElementById（'timeline'）；//时间线
//调整了播放头的时间线宽度
var timelineWidth=225；
//时间更新事件侦听器
music.addEventListener（“timeupdate”，timeupdate，false）；
//使时间线可点击
timeline.addEventListener（“单击”），函数（事件）{
移动游戏头（事件）；
music.currentTime=持续时间*点击百分比（事件）；
}，假）；
//以总timelineWidth的小数形式返回单击
功能点击百分比（e）{
返回（例如pageX-timeline.offsetLeft）/timelineWidth；
}
//使playhead可拖动
playhead.addEventListener（'mousedown'，mousedown，false）；
window.addEventListener（'mouseup'，mouseup，false）；
//布尔值，以便仅在释放playhead时在mouseUp上移动鼠标
var onplayhead=false；
函数mouseDown（）{
onplayhead=true；
addEventListener（'mousemove'，moveplayhead，true）；
music.removeEventListener（'timeupdate'，timeupdate，false）；
}
//从所有鼠标单击中获取输入
功能鼠标（e）{
如果（onplayhead==true）{
运动头（e）；
removeEventListener（'mousemove'，moveplayhead，true）；
music.currentTime=持续时间*点击百分比（e）；
music.addEventListener（'timeupdate'，timeupdate，false）；
}
onplayhead=false；
}
//当用户拖动时移动playhead
功能移动播放头（e）{
var newWidth=e.pageX-timeline.offsetLeft；
如果（newWidth>=0&&newWidth timelineWidth）{
playhead.style.width=timelineWidth+“px”；
}
}
//时间更新
//将播放头位置与音频中的当前点同步
函数timeUpdate（）{
var playPercent=timelineWidth*（music.currentTime/duration）；
playhead.style.width=播放百分比+“px”；
if（music.currentTime==持续时间）{
pButton.className=“”；
pButton.className=“播放”；
}
}
//播放并暂停
函数播放（）{
//开始音乐
如果（音乐暂停）{
音乐。播放（）；
//删除播放，添加暂停
pButton.className=“”；
pButton.className=“暂停”；
}否则{//暂停音乐
音乐。暂停（）；
//删除暂停，添加播放
pButton.className=“”；
pButton.className=“播放”；
}
}
//获取音频文件的持续时间
music.addEventListener（“canplaythrough”，函数（）{
持续时间=音乐持续时间；
}，假）；

您遇到的问题似乎是，在用于创建javascript对象的元素加载到文档之前，您正在创建javascript对象“music”、“pButton”等

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

创建音乐时，dom元素不存在，因此音乐为空

只需将JSFIDLE中的“Frameworks&Extensions”设置更改为“No wrap-in-body”，代码就可以工作了

请参考这个

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

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

//组成页面的所有dom元素
//然后添加脚本

---

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

啊，非常感谢！！如果我有代表，我会为你的解决方案。因为你选择了我的答案，我得到+15代表，所以谢谢你。我很高兴我的回答有道理，帮助了你。