Fetch无输出排查：获取音频URL至音频播放器的脚本报错求助

核心问题 #

你的代码存在语法错误与数据访问逻辑问题，导致无法正确获取音频URL或标题：

1. 错误的数据访问语法：$.Clips[: 1].AudioUrl 完全不符合JavaScript规范——jQuery没有$.Clips属性，[:1]也不是合法的数组访问方式，且未正确定位API返回的Clips数组。
2. 遍历对象错误：API返回的顶层数据是包含Clips数组的对象，你直接遍历整个data对象而非目标数组。
3. DOM元素缺失：HTML中没有id为table的元素，导致无法插入生成的内容。
4. HTML转义错误：JavaScript拼接HTML时使用<p>会直接显示为文本，而非生成<p>标签。

修复后的完整代码 #

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<section>
  <h1>TEST</h1>
  <!-- 添加用于展示音频内容的容器 -->
  <div id="audio-container"></div>
</section>

CSS

#audio-container {
  margin: 20px auto;
  width: 80%;
}
.audio-item {
  margin: 10px 0;
  padding: 10px;
  background-color: #E4F5D4;
  border-radius: 4px;
}
h1 {
  text-align: center;
  color: #006600;
  font-size: xx-large;
  font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
}
audio {
  width: 100%;
  margin-top: 5px;
}

JavaScript

$(document).ready(function() {
  // 调用API获取音频数据
  $.getJSON("https://api.omny.fm/orgs/56ccbbb7-0ff7-4482-9d99-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/",
    function(data) {
      var content = '';

      // 遍历API返回的Clips音频数组
      $.each(data.Clips, function(index, clip) {
        // 拼接标题、音频URL与播放器
        content += `
          <div class="audio-item">
            <p><strong>标题：</strong>${clip.Title}</p>
            <p><strong>音频URL：</strong><a href="${clip.AudioUrl}" target="_blank">${clip.AudioUrl}</a></p>
            <audio controls src="${clip.AudioUrl}">
              你的浏览器不支持音频播放
            </audio>
          </div>
        `;
      });

      // 将内容插入到页面容器中
      $('#audio-container').append(content);
    })
    .fail(function() {
      // 处理API请求失败的情况
      $('#audio-container').append('<p>加载音频数据失败，请稍后重试</p>');
    });
});

关键修复点说明 #

• 正确访问API数据：通过data.Clips定位到音频列表数组，遍历每个clip对象，直接用clip.AudioUrl和clip.Title获取对应字段。
• 嵌入音频播放器：使用HTML5的<audio>标签实现直接播放功能，无需额外插件。
• 修复DOM容器：添加id="audio-container"的div作为内容载体，替换原来不存在的#table。
• 优化HTML拼接：用ES6模板字符串拼接内容，代码更易读且避免转义错误。
• 增加错误处理：添加.fail()方法处理请求失败场景，提升用户体验。

内容的提问来源于stack exchange，提问作者AndorBird