javascript - 在 Spotify SDK 上禁用自动播放
问题描述
我在我的网站上集成了 Spotify 的网络播放 SDK，允许我的用户通过他们的 Spotify 帐户登录并播放音乐。
但是，问题是，一旦加载页面，音乐就会播放。我希望在按下播放按钮时发生这种情况。
这是我写的JS代码
/**
* Convert milliseconds to minutes
*/
function millisToMinutesAndSeconds(millis) {
var minutes = Math.floor(millis / 60000);
var seconds = ((millis % 60000) / 1000).toFixed(0);
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
}
jQuery( document ).ready(function() {
console.log( "ready!" );
});
/**
* Callback for Spotify when SDK is ready
*/
window.onSpotifyWebPlaybackSDKReady = () => {
const player = new Spotify.Player({
name: 'Web Playback SDK Quick Start Player',
getOAuthToken: cb => { cb(token); },
volume: 0.8
});
var setintId = 0;
var progressMs = 0;
var progressBar = jQuery('#song-progress .noUi-origin');
// Playback status updates
player.addListener('player_state_changed', state => {
if (state != null) {
jQuery('.current-track__progress__finish').text(millisToMinutesAndSeconds(state.duration));
if (state.paused) {
jQuery('.current-track').find('.play').addClass('ion-ios-play').removeClass('ion-ios-pause');
} else {
jQuery('.current-track').find('.play').addClass('ion-ios-pause').removeClass('ion-ios-play');
}
clearInterval(setintId);
progressMs = state.position;
// progress bar logic
if (state.paused == false) {
setintId = setInterval(function (state) {
progressMs += 1000;
let progressPercentage = progressMs / state.duration * 100;
document.getElementById('song-progress').noUiSlider.set(progressPercentage);
//progressBar.css('left',progressPercentage.toFixed(1) + '%');
jQuery('.current-track__progress__start').text(millisToMinutesAndSeconds(progressMs));
if (progressMs >= state.duration) {
clearInterval(setintId);
}
}, 1000, state);
}
}
});
// Seek to a minute into the track
progressBar.find('.noUi-handle').on('mousedown',function(){
clearInterval(setintId);
});
progressBar.find('.noUi-handle').on('mouseup',function(){
player.getCurrentState().then(state => {
if (!state) {
console.error('User is not playing music through the Web Playback SDK');
return;
}
var percentage = parseInt(progressBar.css('left')) / parseInt(progressBar.parent().width()) * 100;
document.getElementById('song-progress').noUiSlider.set(percentage);
var seekTo = ( parseInt( percentage ) / 100 ) * state.duration;
player.seek(seekTo).then(() => {
console.log('Changed position!');
});
});
});
// Error handling
player.addListener('initialization_error', ({ message }) => { alert(message); });
player.addListener('authentication_error', ({ message }) => { alert(message); });
player.addListener('account_error', ({ message }) => { alert(message); });
player.addListener('playback_error', ({ message }) => { alert(message); });
// Ready
player.addListener('ready', ({ device_id }) => {
var playerSkin = jQuery('.current-track');
var trackList = jQuery('.tracks');
var tracks = [];
if (typeof search_artist !== "undefined") {
fetch('https://api.spotify.com/v1/search/?q=' + search_artist + '&type=artist', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
}).then(function(response) {
return response.json();
}).then((response)=>{
var artists = response.artists;
var firstItemId = artists.items[0].id;
getTopTenTracks(firstItemId);
}).catch((error)=>{
console.log('error',error);
});
}
function getTopTenTracks(artistID) {
fetch('https://api.spotify.com/v1/artists/'+ artistID +'/top-tracks?market=from_token', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
}).then(function(response) {
return response.json();
}).then((response)=>{
var tracksGot = response.tracks;
parseTracksList(tracksGot);
trackList = jQuery('.tracks');
trackList.find('.track').each(function(){
tracks.push(jQuery(this).data('uri'));
});
// setUpListeners();
fetch('https://api.spotify.com/v1/me/player/play?device_id=' + device_id, {
method: 'PUT',
body: JSON.stringify({uris: tracks}),
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
}).then(function (response) {
setUpListeners();
});
}).catch((error)=>{
console.log('error',error);
});
}
function parseTracksList(tracks) {
for (var i = 0; i < tracks.length; i++) {
appendTrackToHtml(tracks[i],i);
}
}
var artistContent = document.getElementById('search_artist_content');
function appendTrackToHtml(track, iterator) {
var wrapper = document.createElement('div');
wrapper.className='tracks songTrack';
var trackDiv = document.createElement('div');
trackDiv.className = 'track';
trackDiv.setAttribute('data-uri',track.uri);
var imgWrapper = document.createElement('div');
imgWrapper.className = 'track__art';
var trackArt = document.createElement("img");
trackArt.src = track.album.images[2].url;
imgWrapper.appendChild(trackArt);
trackDiv.appendChild(imgWrapper);
var counter = document.createElement('div');
counter.className = 'track__number';
counter.append(iterator);
trackDiv.append(counter);
var checkMarkWrap = document.createElement('div');
checkMarkWrap.className = 'track__added';
var icon = document.createElement('i');
icon.className = 'ion-checkmark-round added';
checkMarkWrap.appendChild(icon);
trackDiv.appendChild(checkMarkWrap);
var trackTitle = document.createElement('div');
trackTitle.className = 'track__title';
trackTitle.append(track.name);
trackDiv.appendChild(trackTitle);
wrapper.appendChild(trackDiv);
artistContent.appendChild(wrapper);
}
if (typeof search_artist === "undefined") {
trackList.find('.track').each(function(){
tracks.push(jQuery(this).data('uri'));
});
//Start to play
fetch('https://api.spotify.com/v1/me/player/play?device_id=' + device_id, {
method: 'PUT',
body: JSON.stringify({uris: tracks}),
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
});
setUpListeners();
}
function setUpListeners() {
// Change track from OverView list
trackList.on('click','.track',function(){
fetch('https://api.spotify.com/v1/me/player/play?device_id=' + device_id, {
method: 'PUT',
body: JSON.stringify({ uris: [jQuery(this).data('uri')] }),
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
});
});
// Start to play all tracks by clicking play button of artist
jQuery('.artist__info__actions button.button-dark').on('click', function () {
fetch('https://api.spotify.com/v1/me/player/play?device_id=' + device_id, {
method: 'PUT',
body: JSON.stringify({uris: tracks}),
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
});
});
//Play button
playerSkin.find('.play').on('click', function () {
jQuery(this).toggleClass('ion-ios-play ion-ios-pause');
console.log('play clicked');
player.togglePlay().then(() => {
console.log('Toggled playback!');
});
});
//Volume button
playerSkin.find('#song-volume .noUi-origin').on('mouseup', function () {
let width = parseInt(playerSkin.find('#song-volume .noUi-base').width());
let volume = parseInt(jQuery(this).css('left')) / width;
player.setVolume(volume.toFixed(1)).then(() => {
// Switch buttons
if (volume == 0) {
playerSkin.find('.control.volume i').addClass('ion-volume-mute').removeClass('ion-volume-hight');
} else {
playerSkin.find('.control.volume i').addClass('ion-volume-hight').removeClass('ion-volume-mute');
}
});
});
//Mute button
playerSkin.on('click', '.control.volume i.ion-volume-high', function () {
player.setVolume(0).then(() => {
playerSkin.find('.control.volume i').addClass('ion-volume-mute').removeClass('ion-volume-high');
playerSkin.find('#song-volume .noUi-origin').css('left', '0%');
});
});
//Unmute button
playerSkin.on('click', '.control.volume i.ion-volume-mute', function () {
player.setVolume(0.5).then(() => {
playerSkin.find('.control.volume i').addClass('ion-volume-high').removeClass('ion-volume-mute');
playerSkin.find('#song-volume .noUi-origin').css('left', '50%');
});
});
// Next track
playerSkin.find('.ion-ios-skipforward').on('click', function () {
player.nextTrack().then(() => {
console.log('Skipped to next track!');
});
});
//Prev track
playerSkin.find('.ion-ios-skipbackward').on('click', function () {
player.previousTrack().then(() => {
console.log('Set to previous track!');
});
});
// Change position and Duration
player.addListener('player_state_changed', ({
position,
duration,
track_window: {current_track}
}) => {
jQuery('.playing__song__name').text(current_track.name);
jQuery('.playing__song__artist').text(current_track.artists[0].name);
jQuery('.playing__art img').attr('src', current_track.album.images[0].url);
//Set active item in list
trackList.find('.track').removeClass('playing');
trackList.find('[data-uri="' + current_track.uri + '"]').addClass('playing');
});
}
});
// Connect to the player!
player.connect();
};
任何指导将不胜感激。
解决方案
浏览了一下，这似乎是您的代码而不是 SDK 本身的问题。
在player.addListener('ready')块中（初始化播放器时将自动调用），你有一条线，if (typeof search_artist !== "undefined")另一条检查它是否未定义。如果没有看到定义的代码，我无法确切知道发生了什么search_artist，但两条路径最终都会调用https://api.spotify.com/v1/me/player/play，从而导致您听到的播放。
如果您希望在单击按钮时播放，您应该为它创建一个单独的函数，而不是在回调中调用它。
推荐阅读
- mysql - “Azure Defender for MySQL”和“Azure Database for MySQL 的高级威胁防护”之间的区别
- python - Seaborn 联合图用相关性注释
- react-native - 如何在新的 React Native 架构中调试 javascript？
- javascript - 函数未在管道中的地图内执行
- idempiere - 在语言中更新格式时，不会发生 Idempiere 7.1 中显示和输入日期格式的更改
- r - 在新列中分配值-效率，请
- logging - 将日志输出发送到 Sentry
- javascript - 将轮播滑块添加到 woocommerce 商店页面（不是单个产品页面）
- python - Python：将熊猫数据框中每一列中的特殊字符替换为NULL
- reactjs - 选择值时未触发 OnChange