motyar · March 19, 2023 16:31
diff --git a/podsearch.html b/podsearch.html
 <html>
  <head>
    <!-- Add TailwindCSS stylesheet -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
  </head>
  <body class="bg-gray-100 min-h-screen flex flex-col justify-center items-center">
    <div class="bg-white p-4 rounded-md shadow-md max-w-lg w-full">
      <!-- create a form to get user search input -->
      <form id="searchForm">
        <label for="searchInput" class="block font-medium text-gray-700 mb-2">Search for a podcast:</label>
        <input type="text" id="searchInput" name="searchInput" class="block border-gray-200 rounded-md w-full py-2 px-3 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 mb-4">
        <button type="submit" id="searchButton" class="bg-indigo-500 text-white py-2 px-4 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">Search</button>
      </form>

      <!-- create a container to show search results -->
      <div id="searchResults" class="mt-4"></div>
    </div>

    <script>
      // declare global variable to hold Audio object
      let currentAudio;

      // listen for form submission
      document.getElementById("searchForm").addEventListener("submit", function(event) {
        event.preventDefault();
        // get user input from form
        const query = document.getElementById("searchInput").value;
        // construct API URL with user input
        const url = `https://itunes.apple.com/search?term=${query}&media=podcast&entity=podcastEpisode&limit=100`;
        // call API and handle response
        fetch(url)
          .then(response => response.json())
          .then(data => {
            // clear previous search results
            document.getElementById("searchResults").innerHTML = "";
            // stop current audio if it exists
            if (currentAudio) {
              currentAudio.pause();
              currentAudio = null;
            }
            // loop through search results and create HTML for each item
            data.results.forEach(result => {
              const title = result.trackName;
              const albumArt = result.artworkUrl60;
              const audioUrl = result.previewUrl;
              const item = `
                <div class="flex items-center mb-4">
                  <img src="${albumArt}" class="w-12 h-12 rounded-md mr-4">
                  <div>
                    <p class="text-lg font-medium mb-1">${title}</p>
                    <button onclick="playAudio('${audioUrl}', '${query}')" class="bg-indigo-500 text-white py-1 px-2 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">Play</button>
                  </div>
                </div>
              `;
              // add HTML for each item to container
              document.getElementById("searchResults").innerHTML += item;
            });
          });
      });

      // function to play audio
      function playAudio(audioUrl, query) {
        // stop current audio if it exists
        if (currentAudio) {
          currentAudio.pause();
        }
        const audio = new Audio(audioUrl);
        audio.addEventListener("canplaythrough", function() {
          audio.play();
          alert(`Playing audio for "${query}"`);
        });
        // assign new Audio object to global variable
        currentAudio = audio;
      }
    </script>
  </body>
 </html>
	<html>
	<head>
	<!-- Add TailwindCSS stylesheet -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
	</head>
	<body class="bg-gray-100 min-h-screen flex flex-col justify-center items-center">
	<div class="bg-white p-4 rounded-md shadow-md max-w-lg w-full">
	<!-- create a form to get user search input -->
	<form id="searchForm">
	<label for="searchInput" class="block font-medium text-gray-700 mb-2">Search for a podcast:</label>
	<input type="text" id="searchInput" name="searchInput" class="block border-gray-200 rounded-md w-full py-2 px-3 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 mb-4">
	<button type="submit" id="searchButton" class="bg-indigo-500 text-white py-2 px-4 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">Search</button>
	</form>

	<!-- create a container to show search results -->
	<div id="searchResults" class="mt-4"></div>
	</div>

	<script>
	// declare global variable to hold Audio object
	let currentAudio;

	// listen for form submission
	document.getElementById("searchForm").addEventListener("submit", function(event) {
	event.preventDefault();
	// get user input from form
	const query = document.getElementById("searchInput").value;
	// construct API URL with user input
	const url = `https://itunes.apple.com/search?term=${query}&media=podcast&entity=podcastEpisode&limit=100`;
	// call API and handle response
	fetch(url)
	.then(response => response.json())
	.then(data => {
	// clear previous search results
	document.getElementById("searchResults").innerHTML = "";
	// stop current audio if it exists
	if (currentAudio) {
	currentAudio.pause();
	currentAudio = null;
	}
	// loop through search results and create HTML for each item
	data.results.forEach(result => {
	const title = result.trackName;
	const albumArt = result.artworkUrl60;
	const audioUrl = result.previewUrl;
	const item = `
	<div class="flex items-center mb-4">
	<img src="${albumArt}" class="w-12 h-12 rounded-md mr-4">
	<div>
	<p class="text-lg font-medium mb-1">${title}</p>
	<button onclick="playAudio('${audioUrl}', '${query}')" class="bg-indigo-500 text-white py-1 px-2 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">Play</button>
	</div>
	</div>
	`;
	// add HTML for each item to container
	document.getElementById("searchResults").innerHTML += item;
	});
	});
	});

	// function to play audio
	function playAudio(audioUrl, query) {
	// stop current audio if it exists
	if (currentAudio) {
	currentAudio.pause();
	}
	const audio = new Audio(audioUrl);
	audio.addEventListener("canplaythrough", function() {
	audio.play();
	alert(`Playing audio for "${query}"`);
	});
	// assign new Audio object to global variable
	currentAudio = audio;
	}
	</script>
	</body>
	</html>