javascript - 如何从 collection.json 中获取音频文件

Question

如何从此 collection.json 中获取 mp3 音频链接。我想得到它，这样当用户在搜索框中搜索时，音频文件就会弹出来播放，但我有点困惑

这是我到目前为止的代码

          const media = 'audio';
          const searchInput = document.querySelector('.search');
          const output = document.querySelector('.output')

          searchInput.addEventListener('change', searchData);

          async function searchData() {
            let search = this.value;
            const finalData = await getData(search);
            render(finalData);
          }

          function render(data) {
          	let html;
          if(media == 'image') {
             html = data.map(result => {
            	return `
            		<div class="image">
            			<img src="${result.links[0].href}"/>
            		</div>
            	`
            }).join("");
        	} else {
        		//parse the json 
                    console.log(data);
                    data.map(result => {
                      console.log(result);
                    })
                    /* i want to get the mp3 audio out of the collection.json , how do i do this please? */
                    
        	}
        	output.innerHTML = html;

          }

          function getData(search) {
            const endpoint = `https://images-api.nasa.gov/search?q=${search}&media_type=${media}`;

            return fetch(endpoint)
              .then(blob => blob.json())
              .then(data => data.collection.items);
          }

<input type="text" class="search" placeholder="planet">
<div class="output"></div>

提前谢谢

Answer 1

您只是执行查询来获取 API 数据，该数据返回对象集合，每个对象仅描述一个资源。

对于每个资源，要获取实际 MP3 的 URL，您需要再次获取 collection.json文件，位于 href 中提供的 URL field 。这将返回该 JSON 文件的内容，在本例中，该文件是指向更多文件的 URL 数组，其中一些是 mp3。然后，您需要在该数组中找到一个以 .mp3 结尾的 URL。并将其设置为 src的<audio>元素。