Electron Video Player Sound Issues 2025: Complete Guide to Auto Play Audio

// main.js - Application entry point
const { app, BrowserWindow } = require("electron");

// Configure autoplay policy before app ready
app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required");

// Additional flags for enhanced compatibility
app.commandLine.appendSwitch("disable-features", "MediaSessionService");
app.commandLine.appendSwitch("enable-features", "OverlayScrollbar");

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false,
      sandbox: false
    }
  });

  mainWindow.loadFile("index.html");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// video-player.js
class ElectronVideoPlayer {
  constructor() {
    this.video = document.getElementById("mainVideo");
    this.playBtn = document.getElementById("playBtn");
    this.pauseBtn = document.getElementById("pauseBtn");
    this.volumeSlider = document.getElementById("volumeSlider");

    this.initializePlayer();
    this.setupEventListeners();
  }

  initializePlayer() {
    // Ensure video is ready for autoplay
    this.video.addEventListener("loadedmetadata", () => {
      console.log("Video metadata loaded");
      this.attemptAutoplay();
    });

    // Handle autoplay failures gracefully
    this.video.addEventListener("play", () => {
      console.log("Video playback started");
    });

    this.video.addEventListener("pause", () => {
      console.log("Video playback paused");
    });
  }

  async attemptAutoplay() {
    try {
      // Modern approach: use play() promise
      await this.video.play();
      console.log("Autoplay successful");
    } catch (error) {
      console.warn("Autoplay failed:", error);
      this.showPlayButton();
    }
  }

  showPlayButton() {
    this.playBtn.style.display = "block";
    this.playBtn.textContent = "Click to Play with Sound";
  }

  setupEventListeners() {
    this.playBtn.addEventListener("click", async () => {
      try {
        this.video.muted = false;
        await this.video.play();
        this.playBtn.style.display = "none";
      } catch (error) {
        console.error("Manual play failed:", error);
      }
    });

    this.pauseBtn.addEventListener("click", () => {
      this.video.pause();
    });

    this.volumeSlider.addEventListener("input", (e) => {
      this.video.volume = e.target.value;
    });

    // Handle visibility changes
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) {
        this.video.pause();
      }
    });
  }

  // Method to programmatically control volume
  setVolume(level) {
    this.video.volume = Math.max(0, Math.min(1, level));
  }

  // Method to seek to specific time
  seekTo(seconds) {
    this.video.currentTime = seconds;
  }
}

// Initialize player when DOM is ready
document.addEventListener("DOMContentLoaded", () => {
  const player = new ElectronVideoPlayer();
});

// Advanced configuration for professional applications
app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required");
app.commandLine.appendSwitch("disable-background-media-suspend");
app.commandLine.appendSwitch("disable-renderer-backgrounding");
app.commandLine.appendSwitch("disable-backgrounding-occluded-windows");
app.commandLine.appendSwitch("disable-background-timer-throttling");

// Security and performance optimizations
app.commandLine.appendSwitch("enable-gpu-rasterization");
app.commandLine.appendSwitch("enable-zero-copy");
app.commandLine.appendSwitch("ignore-certificate-errors-spki-list");

// Media-specific optimizations
app.commandLine.appendSwitch("enable-media-stream");
app.commandLine.appendSwitch("use-fake-ui-for-media-stream");

// config.js
const isDevelopment = process.env.NODE_ENV === "development";
const isProduction = process.env.NODE_ENV === "production";

function configureChromiumFlags() {
  // Always required for audio autoplay
  app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required");

  if (isDevelopment) {
    // Development-specific flags
    app.commandLine.appendSwitch("disable-web-security");
    app.commandLine.appendSwitch("allow-running-insecure-content");
  }

  if (isProduction) {
    // Production optimizations
    app.commandLine.appendSwitch("enable-gpu-rasterization");
    app.commandLine.appendSwitch("disable-background-media-suspend");
  }
}

module.exports = { configureChromiumFlags };

class AdvancedAudioController {
  constructor() {
    this.audioContext = null;
    this.gainNode = null;
    this.source = null;
  }

  async initializeAudioContext() {
    try {
      this.audioContext = new (window.AudioContext ||
        window.webkitAudioContext)();
      this.gainNode = this.audioContext.createGain();
      this.gainNode.connect(this.audioContext.destination);
    } catch (error) {
      console.error("Audio context initialization failed:", error);
    }
  }

  async playAudioFile(audioBuffer) {
    if (!this.audioContext) await this.initializeAudioContext();

    this.source = this.audioContext.createBufferSource();
    this.source.buffer = audioBuffer;
    this.source.connect(this.gainNode);
    this.source.start(0);
  }

  setVolume(level) {
    if (this.gainNode) {
      this.gainNode.gain.setValueAtTime(level, this.audioContext.currentTime);
    }
  }
}

// Using node-speaker for direct audio output
const Speaker = require("speaker");
const fs = require("fs");

class ElectronAudioPlayer {
  constructor() {
    this.speaker = new Speaker({
      channels: 2,
      bitDepth: 16,
      sampleRate: 44100
    });
  }

  playAudioFile(filePath) {
    const audioStream = fs.createReadStream(filePath);
    audioStream.pipe(this.speaker);
  }
}

// Diagnostic function
function diagnoseAutoplayIssues() {
  const video = document.getElementById("mainVideo");

  // Check if autoplay is supported
  const canAutoplay = video.autoplay;
  console.log("Autoplay supported:", canAutoplay);

  // Check current autoplay policy
  navigator.permissions.query({ name: "autoplay" }).then((result) => {
    console.log("Autoplay permission:", result.state);
  });

  // Test play promise
  const playPromise = video.play();
  if (playPromise !== undefined) {
    playPromise
      .then(() => {
        console.log("Play promise resolved");
      })
      .catch((error) => {
        console.log("Play promise rejected:", error);
      });
  }
}

// Resume audio context on user interaction
document.addEventListener(
  "click",
  async () => {
    if (audioContext.state === "suspended") {
      await audioContext.resume();
      console.log("Audio context resumed");
    }
  },
  { once: true }
);

// Configure CORS for audio files
app.commandLine.appendSwitch("disable-web-security");
app.commandLine.appendSwitch("disable-features", "VizDisplayCompositor");

// Or serve files locally
const path = require("path");
const express = require("express");

function setupLocalMediaServer() {
  const mediaServer = express();
  mediaServer.use("/media", express.static(path.join(__dirname, "assets")));
  mediaServer.listen(3000, () => {
    console.log("Local media server running on port 3000");
  });
}

// Secure configuration for production
const secureConfig = {
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    enableRemoteModule: false,
    sandbox: true,
    webSecurity: true, // Keep enabled in production
    allowRunningInsecureContent: false
  }
};

// Optimize video loading
function optimizeVideoPerformance() {
  const video = document.getElementById("mainVideo");

  // Preload only metadata initially
  video.preload = "metadata";

  // Load full video on user interaction
  video.addEventListener(
    "mouseenter",
    () => {
      if (video.preload !== "auto") {
        video.preload = "auto";
        video.load();
      }
    },
    { once: true }
  );
}

// Respect user preferences
class UserPreferenceManager {
  constructor() {
    this.preferences = this.loadPreferences();
  }

  loadPreferences() {
    return JSON.parse(localStorage.getItem("audioPreferences") || "{}");
  }

  savePreferences(prefs) {
    localStorage.setItem("audioPreferences", JSON.stringify(prefs));
    this.preferences = prefs;
  }

  shouldAutoplay() {
    return this.preferences.autoplay !== false;
  }

  getPreferredVolume() {
    return this.preferences.volume || 0.8;
  }
}