To automatically load an initial file like "sentences.txt" when the page loads — in addition to supporting user-selected files — you need to:

1. Fetch the file using a normal HTTP request.

2. Process it the same way you're processing uploaded files.

Here's how to modify your code:

✅ Updated Code (with automatic file load)

javascript
複製編輯
// Function to process and display lines
function processLines(text) {
  const lines = text.split(/\r?\n/).map(l => l.trim()).filter(l => l);
  sentenceList.innerHTML = '';
  lines.forEach(line => {
    const li = document.createElement('li');
    li.textContent = line;
    li.addEventListener('click', () => speakFiltered(line, li));
    sentenceList.appendChild(li);
  });
}

// Load "sentences.txt" automatically on page load
fetch('sentences.txt')
  .then(response => {
    if (!response.ok) throw new Error('Could not load sentences.txt');
    return response.text();
  })
  .then(text => {
    processLines(text);
  })
  .catch(error => {
    console.error(error);
    alert('Failed to load default sentences file.');
  });

// Handle user file selection
fileInput.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.readAsText(file);

  reader.onload = () => {
    processLines(reader.result);
  };

  reader.onerror = () => {
    alert('Error reading file.');
  };
});

📌 Notes

• sentences.txt must be accessible via HTTP: Put it in the same directory as your HTML file or adjust the path accordingly.

• The processLines function avoids repeating the same logic for both the fetch and file reader.

• If you’re serving this from a server (even a local one), the browser will load "sentences.txt" automatically on startup.

Let me know if you want to preload a different file or use a fallback mechanism.