Fix deezer(multiple audio)

Author: mantou132

src/page/btn.ts

@@ -2,7 +2,7 @@ import { sendEvent, events } from '../common/ga';
 import { Event, isProd, Message } from '../common/constants';
 
 import { configPromise, localConfig } from './config';
-import { lyricVideo, audioPromise, lyricVideoIsOpen } from './element';
+import { lyricVideo, getCurrentAudio, lyricVideoIsOpen } from './element';
 import {
   appendStyle,
   css,
@@ -63,7 +63,7 @@ window.addEventListener(
 );
 
 export const insetLyricsBtn = async () => {
-  await audioPromise;
+  await getCurrentAudio();
 
   const options = await optionsPromise;
   const { BTN_WRAPPER_SELECTOR, BTN_LIKE_SELECTOR } = await configPromise;

src/page/config.ts

@@ -99,8 +99,10 @@ export const localConfig: LocalConfig = (() => {
       return {
         SERVICE_WORKER: '',
         STATIC_STYLE: css`
-          .page-topbar + div [data-testid='conversionBanner'] {
-            display: none;
+          .page-topbar + div [data-testid='conversionBanner'],
+          [data-testid='alert-StreamingNotAllowed'],
+          .ads {
+            display: none !important;
           }
           .${LYRICS_CLASSNAME} {
             order: 100;

src/page/editor/app.ts

@@ -3,7 +3,7 @@ import { customElement, emitter, Emitter, refobject, RefObject } from '@mantou/g
 
 import { theme } from '../../common/theme';
 import { events, sendEvent } from '../../common/ga';
-import { audioPromise, lyricVideoIsOpen } from '../element';
+import { getCurrentAudio, lyricVideoIsOpen } from '../element';
 import { sharedData } from '../share-data';
 import { parseLyrics, Lyric } from '../lyrics';
 import { setSong } from '../store';
@@ -88,7 +88,7 @@ export class EditorApp extends GemElement<State> {
     const options = await optionsPromise;
     sendEvent(options.cid, events.openEditor);
 
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     this.originLoop = audio.loop;
     audio.loop = true;
     this.originPlaybackRate = audio.playbackRate;
@@ -97,7 +97,7 @@ export class EditorApp extends GemElement<State> {
   }
 
   async unmounted() {
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     audio.loop = this.originLoop;
     audio.playbackRate = this.originPlaybackRate;
     document.removeEventListener('paste', this.pasteHandler);
@@ -107,7 +107,7 @@ export class EditorApp extends GemElement<State> {
   changePlaybackRate = async () => {
     const { element } = this.playbackRateInput;
     if (!element) return;
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     audio.playbackRate = Number(element.value);
   };
 
@@ -132,7 +132,7 @@ export class EditorApp extends GemElement<State> {
   };
 
   mark = async () => {
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     const { lyrics, currentIndex } = this.state;
     this.scrollInto();
     lyrics[currentIndex + 1].startTime = audio.currentTime;
@@ -141,7 +141,7 @@ export class EditorApp extends GemElement<State> {
   };
 
   insertLine = async () => {
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     const { lyrics, currentIndex } = this.state;
     this.scrollInto();
     lyrics.splice(currentIndex + 1, 0, { startTime: audio.currentTime, text: '' });
@@ -177,7 +177,7 @@ export class EditorApp extends GemElement<State> {
   };
 
   resetLocal = async (state?: Partial<State>) => {
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     audio.currentTime = 0;
     this.setState({ ...state, currentIndex: -1 });
     setTimeout(this.scrollInto);
@@ -220,7 +220,7 @@ export class EditorApp extends GemElement<State> {
 
   jump = async (t: number | null, index: number) => {
     if (typeof t !== 'number') return;
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     audio.currentTime = t;
     this.setState({ currentIndex: index });
   };

src/page/element.ts

@@ -54,9 +54,9 @@ window.addEventListener('beforeunload', () => {
   if (lyricVideoIsOpen) setPopupState(false);
 });
 
-export const audioPromise = new Promise<HTMLAudioElement>((resolveAudio) => {
-  let audio: HTMLAudioElement | null = null;
+let audio: HTMLAudioElement | null = null;
 
+const firstAudioPromise = new Promise<HTMLAudioElement>((resolveAudio) => {
   const createElement: typeof document.createElement = document.createElement.bind(document);
 
   const elementCountOverrideBefore = document.querySelectorAll('*').length;
@@ -70,11 +70,11 @@ export const audioPromise = new Promise<HTMLAudioElement>((resolveAudio) => {
     ) {
       const element = createElement(tagName, options);
       // Spotify: <video>
-      // Deezer: <audio>
       if ((tagName === 'video' || tagName === 'audio') && !audio) {
-        if (!isProd) console.log('capture_audio_element', audio);
+        if (!isProd) console.log('capture_audio_element', element);
         performance.measure('capture_audio_element');
         audio = element as HTMLAudioElement;
+        handleAudio(audio);
         resolveAudio(audio);
       }
       return element;
@@ -88,13 +88,29 @@ export const audioPromise = new Promise<HTMLAudioElement>((resolveAudio) => {
     const element = querySelector(AUDIO_SELECTOR);
     if (element) {
       audio = element as HTMLAudioElement;
+      handleAudio(audio);
       resolveAudio(audio);
     } else {
       setTimeout(queryAudio, 100);
     }
   };
   queryAudio();
 
+  if (currentPlatform === 'DEEZER') {
+    const A = Audio;
+    (window as any).Audio = class {
+      constructor(src?: string) {
+        const element = new A(src);
+        element.addEventListener('play', () => {
+          audio = element;
+          handleAudio(audio);
+          resolveAudio(audio);
+        });
+        return element;
+      }
+    };
+  }
+
   // Apple music does not insert audio elements by default
   if (currentPlatform !== 'APPLE') {
     // Check if audio is found normally
@@ -118,8 +134,15 @@ export const audioPromise = new Promise<HTMLAudioElement>((resolveAudio) => {
   }
 });
 
-audioPromise.then((audio) => {
-  let reported = false;
+/**
+ * Some platforms (such as Deezer) keep changing Audio
+ */
+export async function getCurrentAudio() {
+  return audio || firstAudioPromise;
+}
+
+let reported = false;
+function handleAudio(audio: HTMLAudioElement) {
   audio.addEventListener('playing', async () => {
     const isMusic = audio.duration && audio.duration > 2.6 * 60 && audio.duration < 4 * 60;
     if (!reported && isMusic && !(await getLyricsBtn())) {
@@ -134,30 +157,29 @@ audioPromise.then((audio) => {
     }
   });
 
-  // safari not support media session, pip contorl video
-  // safari turning off pip will also cause the video to pause
-  let time = performance.now();
-  lyricVideo.addEventListener('pause', () => {
-    const now = performance.now();
-    if (now - time > 300) {
-      time = now;
-      audio.pause();
-    }
-  });
-  lyricVideo.addEventListener('play', () => {
-    // video need't seek, because it is stream
-    audio.play();
+  audio.addEventListener('play', () => {
+    lyricVideo.play();
+    navigator.mediaSession.playbackState = 'playing';
   });
 
-  if (navigator.mediaSession) {
-    const mediaSession = navigator.mediaSession;
-    audio.addEventListener('play', () => {
-      lyricVideo.play();
-      mediaSession.playbackState = 'playing';
-    });
-    audio.addEventListener('pause', () => {
-      lyricVideo.pause();
-      mediaSession.playbackState = 'paused';
-    });
+  audio.addEventListener('pause', () => {
+    lyricVideo.pause();
+    navigator.mediaSession.playbackState = 'paused';
+  });
+}
+
+// safari not support media session, pip control video
+// safari turning off pip will also cause the video to pause
+let time = performance.now();
+lyricVideo.addEventListener('pause', () => {
+  const now = performance.now();
+  if (now - time > 300) {
+    time = now;
+    audio?.pause();
   }
 });
+
+lyricVideo.addEventListener('play', () => {
+  // video need't seek, because it is stream
+  audio?.play();
+});

src/page/index.ts

@@ -9,7 +9,7 @@ import {
   RenderLyricsOptions,
   RenderTextOptions,
 } from './canvas-renderer';
-import { coverCanvas, coverHDCanvas, lyricCtx, audioPromise, lyricVideoIsOpen } from './element';
+import { coverCanvas, coverHDCanvas, lyricCtx, lyricVideoIsOpen, getCurrentAudio } from './element';
 import { sharedData } from './share-data';
 import { optionsPromise, OptionsAndI18n } from './options';
 import { appendStyle } from './utils';
@@ -20,7 +20,7 @@ import { getLyricsBtn } from './btn';
 import './observer';
 
 const tick = async (options: OptionsAndI18n) => {
-  const audio = await audioPromise;
+  const audio = await getCurrentAudio();
   const i18nMap = options.i18nMap;
 
   const isOnlyCover = options['only-cover'] === 'on';

src/page/share-data.ts

@@ -14,7 +14,7 @@ import { fetchSongList, fetchGeniusLyrics } from './genius';
 import { setSong, getSong } from './store';
 import { optionsPromise } from './options';
 import { captureException, querySelector } from './utils';
-import { audioPromise } from './element';
+import { getCurrentAudio } from './element';
 import { configPromise } from './config';
 import { fetchNetEaseSongList } from './netease';
 import { fetchLRCLIBSongList } from './lrclib';
@@ -182,7 +182,7 @@ export class SharedData {
 
   // can only modify `lyrics`/`id`/`aId`/`list`
   private async _matching(fetchOptions: RequestInit) {
-    const audio = await audioPromise;
+    const audio = await getCurrentAudio();
     const startTime = audio.currentSrc ? performance.now() : null;
     const options = await optionsPromise;
     const parseLyricsOptions = await this._getParseLyricsOptions();