我如何从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字段中提供的URL处对href文件执行另一次提取。这将返回该JSON文件的内容，在这种情况下，这是一个URL数组到更多文件，其中一些是mp3。然后，您需要在该数组中找到以.mp3结尾的网址，并将其设置为src元素的<audio>。