Question

我使用spotify api搜索播放列表，然后在我的移动应用程序中显示它们。我正在使用Ajax从api获取信息工作正常但我似乎无法用结果填充div并使应用程序可以播放音乐片段，因为它不希望允许事件听众。您将无法看到所有使用的变量，但此代码之前的所有内容都可以正常运行。

var audioObject = null;
//Spotify page
$(document).on('pagecreate', '#spotify', function(){
console.log("Spotify");
$('#search').on('click', function() {
    //e.preventDefault();
    searchstring = cweather;

    if (!searchstring){
        console.log('no input');
        return;
    }
    console.log(searchstring);
    searchPlaylist(searchstring);
});

});

var userId;

var searchPlaylist = function () {
$.ajax({
    url: 'https://api.spotify.com/v1/search',
    headers: {
        Authorization: 'Bearer ' + spotifyAccessToken,
    },
    data: {
        q: searchstring,
        type: 'playlist',
        market: 'GB',
        offset: '0',
        limit: '5',
    },
    success: function (response) {
        console.log(response);

        var items = response.playlists.items;
        var resultsintohtml = '';

        $.each(items, function(index) {
            var id = items[index].id;
            var name = items[index].name;
            //var image = items[index].image[1].url;
            userId = items[index].owner.id;
            console.log(id, name, userId);
            resultsintohtml += '<div style="backgroundColor="red"" data-album-id="' + id + '" class="cover"></div>';
        });

        console.log(resultsintohtml);
        document.getElementById("results").innerHTML = resultsintohtml;

        addclickevents();
    }
});
};

var fetchTracks = function (playlistsId, userId, callback) {
$.ajax({
    url: 'https://api.spotify.com/v1/users/' + userId + '/playlists/' + playlistsId,
    headers: {
        Authorization: 'Bearer ' + spotifyAccessToken,
    },
    success: function (response) {
        console.log(response);
        callback(response);
    }
});
};

var addclickevents = function () {
$('.cover').click(function (e){
    console.log('get song');
    var target = $(this);

    if (target.hasClass('playing')) {
        audioObject.pause();
    } else {
        if (audioObject){
            audioObject.pause();
        }

        fetchTracks(target.data('playlist-id'), function (data) {
            audioObject = new
            Audio(data.tracks.items[0].preview_url);
            audioObject.play();
            target.addClass('playing');             
        });
        audioObject.addEventListener('pause', function(){
            target.removeClass('playing');
        });
    }
});
};

使用此代码时出现以下错误： Errors 我已经尝试重命名变量，但我得到了同样的错误。我已经仔细检查了dotify中是否有任何遗漏信息，但我已经使用了所有可用的ID。提前谢谢。

Answer 1

更新：仔细查看您的代码，我只是注意到fetchTracks需要3个参数，而您只传递2.第二个参数应为userId，第三个参数应为userId应该是回调。我不知道你的123是什么，但是，假设它是... fetchTracks(target.data('playlist-id'), "123", function (data) { audioObject = new Audio(data.tracks.items[0].preview_url); audioObject.play(); target.addClass('playing'); audioObject.addEventListener('pause', function(){ target.removeClass('playing'); }); }); ...你应该运行这样的函数：

考虑到，您的代码很可能是从Spotify的角度调用损坏的网址（在控制台中应该显示为错误 - 最有可能是403，但也可能是422或87）。

初步回答：

假设上面的代码是生成错误的行，在第audioObject行（在上面的代码段中），您正试图在audioObject上添加一个事件监听器。根据错误，null不是DOM元素，而是... if (audioObject) audioObject.addEventListener('pause', function(){ target.removeClass('playing'); });。因此，您可能希望在应用之前检查元素是否支持该方法：

if (audioObject instanceof Element)
   audioObject.addEventListener('pause', function(){
     target.removeClass('playing');
   });

...或

fetchTracks()

注意（作为未来参考）：每当您决定在[SO]上发布代码图片而不是代码本身时，都希望被投票。

另一个注意：以上内容并未修复您的应用程序的逻辑，该逻辑明显被破坏（或至少不按预期工作）。它只是避免在生成错误时执行代码。

您可能希望在... fetchTracks(target.data('playlist-id'), function (data) { audioObject = new Audio(data.tracks.items[0].preview_url); audioObject.play(); target.addClass('playing'); audioObject.addEventListener('pause', function(){ target.removeClass('playing'); }); }); ...中添加事件侦听器：

<?php
include('../modules/connection.php');
include('../modules/signup.php');

$signUpHandler = new Signup();
$sub = 0;

if (isset($_POST['sign_up']) == 1) {
    $sub = 1;
    $signed = $signUpHandler->validateSignUp($_POST['fulname'], $_POST['username'], $_POST['email'], $_POST['phone'],
        $_POST['address'], $_POST['city'], $_POST['state'], $_POST['country'], $_POST['biz_type'], $_POST['biz_name'],
        $_POST['mailer_use'], $_POST['website'], $_POST['password']);
}
?>

<?php if ($sub == 1) {
    echo @$signed['regReport'];
} else { ?>
    <small class="small alert alert-info">All fields with asterik (*) are required</small><?php } ?>
<br>
<h3>Personal &amp; Contact Detail</h3>
<form method="post" enctype="multipart/form-data" name="signup">
    <div class="form-group">
        <input name="fulname" class="form-control" type="text" placeholder="Fulname* (Lastname Firstname)" required>
        <?php echo @$signed['fulname']; ?>
    </div>
    <br>
    <div class="form-group">
        <input name="email" class="form-control" type="email" placeholder="Email*" required>
        <?php echo @$signed['email']; ?>
    </div>
    <br>
    <div class="form-group">
        <input name="phone" class="form-control" type="tel" placeholder="Phone*" required>
        <?php echo @$signed['phone']; ?>
    </div>
    <br>
    <div class="form-group">
        <input name="address" class="form-control" type="text" placeholder="Address*" required border="1">
    </div>
    <br>
    <div class="form-group">
        <input name="city" class="form-control" type="text" placeholder="City*" required border="1">
    </div>
    <br>
    <div class="form-group">
        <input name="state" class="form-control" type="text" placeholder="State*" required border="1">
    </div>
    <br>
    <div class="form-group">
        <select name="country" id="country" required="required" class="form-control col-md-7 col-xs-12">
            <option value="<?php echo $data['nwcountry']; ?>"
                    selected="selected"><?php echo $data['nwcountry']; ?></option>
            <option value="Afghanistan" title="Afghanistan">Afghanistan</option>
            <option value="Åland Islands" title="Åland Islands">Åland Islands</option>
            <option value="Albania" title="Albania">Albania</option>
            <option value="Algeria" title="Algeria">Algeria</option>
            <option value="American Samoa" title="American Samoa">American Samoa</option>
            <option value="Andorra" title="Andorra">Andorra</option>
            <option value="Angola" title="Angola">Angola</option>
            <option value="Anguilla" title="Anguilla">Anguilla</option>
            <option value="Antarctica" title="Antarctica">Antarctica</option>
            <option value="Antigua and Barbuda" title="Antigua and Barbuda">Antigua and Barbuda</option>
            <option value="Argentina" title="Argentina">Argentina</option>
            <option value="Armenia" title="Armenia">Armenia</option>
            <option value="Aruba" title="Aruba">Aruba</option>
            <option value="Australia" title="Australia">Australia</option>
            <option value="Austria" title="Austria">Austria</option>
            <option value="Azerbaijan" title="Azerbaijan">Azerbaijan</option>
            <option value="Bahamas" title="Bahamas">Bahamas</option>
            <option value="Bahrain" title="Bahrain">Bahrain</option>
            <option value="Bangladesh" title="Bangladesh">Bangladesh</option>
            <option value="Barbados" title="Barbados">Barbados</option>
            <option value="Belarus" title="Belarus">Belarus</option>
            <option value="Belgium" title="Belgium">Belgium</option>
            <option value="Belize" title="Belize">Belize</option>
            <option value="Benin" title="Benin">Benin</option>
            <option value="Bermuda" title="Bermuda">Bermuda</option>
            <option value="Bhutan" title="Bhutan">Bhutan</option>
            <option value="Bolivia, Plurinational State of" title="Bolivia, Plurinational State of">Bolivia,
                Plurinational State of
            </option>
            <option value="Bonaire, Sint Eustatius and Saba" title="Bonaire, Sint Eustatius and Saba">Bonaire, Sint
                Eustatius and Saba
            </option>
            <option value="Bosnia and Herzegovina" title="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
            <option value="Botswana" title="Botswana">Botswana</option>
            <option value="Bouvet Island" title="Bouvet Island">Bouvet Island</option>
            <option value="Brazil" title="Brazil">Brazil</option>
            <option value="British Indian Ocean Territory" title="British Indian Ocean Territory">British Indian Ocean
                Territory
            </option>
            <option value="Brunei Darussalam" title="Brunei Darussalam">Brunei Darussalam</option>
            <option value="Bulgaria" title="Bulgaria">Bulgaria</option>
            <option value="Martinique" title="Martinique">Martinique</option>
            <option value="Mauritania" title="Mauritania">Mauritania</option>
            <option value="Mauritius" title="Mauritius">Mauritius</option>
            <option value="Mayotte" title="Mayotte">Mayotte</option>
            <option value="Mexico" title="Mexico">Mexico</option>
            <option value="Micronesia, Federated States of" title="Micronesia, Federated States of">Micronesia,
                Federated States of
            </option>
            <option value="Moldova, Republic of" title="Moldova, Republic of">Moldova, Republic of</option>
            <option value="Monaco" title="Monaco">Monaco</option>
            <option value="Mongolia" title="Mongolia">Mongolia</option>
            <option value="Montenegro" title="Montenegro">Montenegro</option>
            <option value="Montserrat" title="Montserrat">Montserrat</option>
            <option value="Morocco" title="Morocco">Morocco</option>
            <option value="Mozambique" title="Mozambique">Mozambique</option>
            <option value="Myanmar" title="Myanmar">Myanmar</option>
            <option value="Namibia" title="Namibia">Namibia</option>
            <option value="Nauru" title="Nauru">Nauru</option>
            <option value="Nepal" title="Nepal">Nepal</option>
            <option value="Netherlands" title="Netherlands">Netherlands</option>
            <option value="New Caledonia" title="New Caledonia">New Caledonia</option>
            <option value="New Zealand" title="New Zealand">New Zealand</option>
            <option value="Nicaragua" title="Nicaragua">Nicaragua</option>
            <option value="Niger" title="Niger">Niger</option>
            <option value="Nigeria" title="Nigeria" selected="selected">Nigeria</option>
            <option value="Niue" title="Niue">Niue</option>
            <option value="Norfolk Island" title="Norfolk Island">Norfolk Island</option>
            <option value="Northern Mariana Islands" title="Northern Mariana Islands">Northern Mariana Islands</option>
            <option value="Norway" title="Norway">Norway</option>
            <option value="Oman" title="Oman">Oman</option>
            <option value="Pakistan" title="Pakistan">Pakistan</option>
            <option value="Palau" title="Palau">Palau</option>
            <option value="Palestinian Territory, Occupied" title="Palestinian Territory, Occupied">Palestinian
                Territory, Occupied
            </option>
            <option value="Panama" title="Panama">Panama</option>
            <option value="Papua New Guinea" title="Papua New Guinea">Papua New Guinea</option>
            <option value="Paraguay" title="Paraguay">Paraguay</option>
            <option value="Peru" title="Peru">Peru</option>
            <option value="Philippines" title="Philippines">Philippines</option>
            <option value="Pitcairn" title="Pitcairn">Pitcairn</option>
            <option value="Poland" title="Poland">Poland</option>
            <option value="Portugal" title="Portugal">Portugal</option>
            <option value="Puerto Rico" title="Puerto Rico">Puerto Rico</option>
            <option value="Qatar" title="Qatar">Qatar</option>
            <option value="Réunion" title="Réunion">Réunion</option>
            <option value="Romania" title="Romania">Romania</option>
            <option value="Russian Federation" title="Russian Federation">Russian Federation</option>
            <option value="Rwanda" title="Rwanda">Rwanda</option>
            <option value="Saint Barthélemy" title="Saint Barthélemy">Saint Barthélemy</option>
            <option value="Saint Helena, Ascension and Tristan da Cunha"
                    title="Saint Helena, Ascension and Tristan da Cunha">Saint Helena, Ascension and Tristan da Cunha
            </option>
            <option value="Saint Kitts and Nevis" title="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
            <option value="Saint Lucia" title="Saint Lucia">Saint Lucia</option>
            <option value="Saint Martin (French part)" title="Saint Martin (French part)">Saint Martin (French part)
            </option>
            <option value="Saint Pierre and Miquelon" title="Saint Pierre and Miquelon">Saint Pierre and Miquelon
            </option>
            <option value="Saint Vincent and the Grenadines" title="Saint Vincent and the Grenadines">Saint Vincent and
                the Grenadines
            </option>
            <option value="Samoa" title="Samoa">Samoa</option>
            <option value="San Marino" title="San Marino">San Marino</option>
            <option value="Sao Tome and Principe" title="Sao Tome and Principe">Sao Tome and Principe</option>
            <option value="Saudi Arabia" title="Saudi Arabia">Saudi Arabia</option>
            <option value="Senegal" title="Senegal">Senegal</option>
            <option value="Serbia" title="Serbia">Serbia</option>
            <option value="Seychelles" title="Seychelles">Seychelles</option>
            <option value="Sierra Leone" title="Sierra Leone">Sierra Leone</option>
            <option value="Singapore" title="Singapore">Singapore</option>
            <option value="Sint Maarten (Dutch part)" title="Sint Maarten (Dutch part)">Sint Maarten (Dutch part)
            </option>
            <option value="Slovakia" title="Slovakia">Slovakia</option>
            <option value="Slovenia" title="Slovenia">Slovenia</option>
            <option value="Solomon Islands" title="Solomon Islands">Solomon Islands</option>
            <option value="Somalia" title="Somalia">Somalia</option>
            <option value="South Africa" title="South Africa">South Africa</option>
            <option value="South Georgia and the South Sandwich Islands"
                    title="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands
            </option>
            <option value="South Sudan" title="South Sudan">South Sudan</option>
            <option value="Spain" title="Spain">Spain</option>
            <option value="Sri Lanka" title="Sri Lanka">Sri Lanka</option>
            <option value="Sudan" title="Sudan">Sudan</option>
            <option value="Suriname" title="Suriname">Suriname</option>
            <option value="Svalbard and Jan Mayen" title="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
            <option value="Swaziland" title="Swaziland">Swaziland</option>
            <option value="Sweden" title="Sweden">Sweden</option>
            <option value="Switzerland" title="Switzerland">Switzerland</option>
            <option value="Syrian Arab Republic" title="Syrian Arab Republic">Syrian Arab Republic</option>
            <option value="Taiwan, Province of China" title="Taiwan, Province of China">Taiwan, Province of China
            </option>
            <option value="Tajikistan" title="Tajikistan">Tajikistan</option>
            <option value="Tanzania, United Republic of" title="Tanzania, United Republic of">Tanzania, United Republic
                of
            </option>
            <option value="Thailand" title="Thailand">Thailand</option>
            <option value="Timor-Leste" title="Timor-Leste">Timor-Leste</option>
            <option value="Togo" title="Togo">Togo</option>
            <option value="Tokelau" title="Tokelau">Tokelau</option>
            <option value="Tonga" title="Tonga">Tonga</option>
            <option value="Trinidad and Tobago" title="Trinidad and Tobago">Trinidad and Tobago</option>
            <option value="Tunisia" title="Tunisia">Tunisia</option>
            <option value="Turkey" title="Turkey">Turkey</option>
            <option value="Turkmenistan" title="Turkmenistan">Turkmenistan</option>
            <option value="Turks and Caicos Islands" title="Turks and Caicos Islands">Turks and Caicos Islands</option>
            <option value="Tuvalu" title="Tuvalu">Tuvalu</option>
            <option value="Uganda" title="Uganda">Uganda</option>
            <option value="Ukraine" title="Ukraine">Ukraine</option>
            <option value="United Arab Emirates" title="United Arab Emirates">United Arab Emirates</option>
            <option value="United Kingdom" title="United Kingdom">United Kingdom</option>
            <option value="United States" title="United States">United States</option>
            <option value="United States Minor Outlying Islands" title="United States Minor Outlying Islands">United
                States Minor Outlying Islands
            </option>
            <option value="Uruguay" title="Uruguay">Uruguay</option>
            <option value="Uzbekistan" title="Uzbekistan">Uzbekistan</option>
            <option value="Vanuatu" title="Vanuatu">Vanuatu</option>
            <option value="Venezuela, Bolivarian Republic of" title="Venezuela, Bolivarian Republic of">Venezuela,
                Bolivarian Republic of
            </option>
            <option value="Viet Nam" title="Viet Nam">Viet Nam</option>
            <option value="Virgin Islands, British" title="Virgin Islands, British">Virgin Islands, British</option>
            <option value="Virgin Islands, U.S." title="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
            <option value="Wallis and Futuna" title="Wallis and Futuna">Wallis and Futuna</option>
            <option value="Western Sahara" title="Western Sahara">Western Sahara</option>
            <option value="Yemen" title="Yemen">Yemen</option>
            <option value="Zambia" title="Zambia">Zambia</option>
            <option value="Zimbabwe" title="Zimbabwe">Zimbabwe</option>
        </select>
    </div>
    <hr>
    <h4>Login Details</h4>
    <div class="form-group">
        <input name="username" class="form-control" type="text" placeholder="Username*" required border="1" max="16"
               min="6"><?php if ($sub == 1) {
            echo @$signed['username'];
        } else { ?>
            <small class="small text-info">6-16 characters of upper, lower alphabets &amp; numbers or combinations
            </small><?php } ?>
    </div>
    <div class="form-group">
        <input name="password" class="form-control" type="password" placeholder="Password*" required border="1">
    </div>
    <hr>
    <h4>Business Detail</h4>
    <div class="form-group">
        <input name="biz_name" class="form-control" type="text" placeholder="Business Name*" required border="1">
    </div>
    <br>
    <div class="form-group">
        <input name="biz_type" class="form-control" type="text" placeholder="Business Type*" required border="1">
    </div>
    <br>
    <div class="form-group">
        <select name="mailer_use" class="form-control">
            <option selected value="">What do you need MBC MailBlast for?</option>
            <option value="Send Newsletter">Send Newsletter</option>
            <option value="Market Products/Services">Market Products/Services</option>
            <option value="Send Trasactional Emails">Send Transactional emails</option>
            <option value="Send Routine Emails">Send Routine/Reminders</option>
        </select>
    </div>
    <br>
    <div class="form-group">
        <input name="website" class="form-control" type="url" placeholder="Business Website (Ex. http://website.com)"
               border="1"><?php echo @$signed['website']; ?>
    </div>
    <br>
    <div class="form-group">
        <button class="btn btn-block btn-success" type="submit" name="sign_up" value="sign up"><i
                    class="fa fa-login"></i> Sign Up
        </button>
    </div>
</form>

...，但是，如果没有最小的工作示例，我无法确定。

Answer 2

如果+------+---------+--------------+ |Letter|distances| category| +------+---------+--------------+ | A| 20|I am not sure!| | B| 30|I am not sure!| | D| 80|I am not sure!| | E| 0| Dead| +------+---------+--------------+仅在audioObject的回调中分配了值，则在调用fetchTracks时不会定义该值。

单击audioObject.addEventListener时，将调用事件侦听器。如果封面没有“播放”类，那么：

.cover仍为空
audioObject将被调用，但在收到响应之前不会触发回调
fetchTracks将被称为，但 audioObject.addEventListener为audioObject
null的响应返回，并在回调中将audioObject设置为Audio的实例

您有没有理由选择在回调之外添加事件监听器？

JavaScript - Spotify API，获取播放列表轨道

2 个答案: