[英]Soundcloud API not working with custom HTML5 audio player with JS controls, works with HTML5 controls
所以這是我的問題所在。 如您所見,使用內置控件,通過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>
自定義音頻播放器的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);
您似乎遇到的問題是,要在將用於創建JavaScript對象的元素加載到文檔中之前創建javascript對象“ music”,“ pButton”等。
var music = document.getElementById('music'); // id for audio element
創建音樂時,dom元素不存在,因此音樂為null。
只需將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文件的末尾包含script標記,則您的代碼將在不做任何修改的情況下運行。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.