Extract Apple Podcast Title

To create a simple browser-side HTML file that can extract the title of an Apple Podcast from the <h1> element, you would typically use JavaScript to grab the title from the webpage.

Here’s an example HTML file with JavaScript to achieve this:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Podcast Title Extractor</title>
</head>
<body>

    <h1>Extract Apple Podcast Title</h1>

    <div>
        <label for="podcastURL">Enter Apple Podcast URL: </label>
        <input type="text" id="podcastURL" placeholder="Paste the URL here">
        <button onclick="fetchPodcastTitle()">Get Podcast Title</button>
    </div>

    <div id="result">
        <h2>Podcast Title: </h2>
        <p id="title">No title extracted yet.</p>
    </div>

    <script>
        function fetchPodcastTitle() {
            const url = document.getElementById('podcastURL').value;

            // Create an iframe to load the URL of the podcast
            const iframe = document.createElement('iframe');
            iframe.src = url;
            iframe.style.display = 'none';

            iframe.onload = function() {
                // Get the title from the <h1> element of the loaded podcast page
                const titleElement = iframe.contentWindow.document.querySelector('h1');
                if (titleElement) {
                    document.getElementById('title').innerText = titleElement.innerText;
                } else {
                    document.getElementById('title').innerText = 'Title not found.';
                }
            };

            // Append the iframe to the document body temporarily
            document.body.appendChild(iframe);
        }
    </script>

</body>
</html>

Explanation:

Input Field and Button: Users can input the URL of the Apple Podcast they want to extract the title from and click the "Get Podcast Title" button.
JavaScript Logic:
- When the button is clicked, the fetchPodcastTitle() function is triggered.
- An invisible iframe is created, which loads the Apple Podcast URL.
- After the iframe is loaded, JavaScript accesses the document inside the iframe and extracts the content of the first <h1> element, which is assumed to be the title of the podcast.
- The title is then displayed in the <p> element below the button.

Limitations:

Cross-origin issues: This method works only if the Apple Podcast page allows cross-origin requests. If the podcast URL is blocked by CORS (Cross-Origin Resource Sharing) settings, you might not be able to extract the title. To overcome this, you might need to use server-side solutions or an API.

If you face CORS issues, it will be necessary to build a back-end solution or use a third-party API that fetches data server-side.

你說：

ChatGPT 說：

Explanation:

Limitations: