Попытка воспроизвести mp3 с использованием Vue. js - PullRequest
Новая
       18

Попытка воспроизвести mp3 с использованием Vue. js

3 голосов
/ 10 июля 2020

Цель:

  • Попытка добавить фоновый звук в мой проект с помощью локального файла, который имеет состояние паузы воспроизведения.

Загрузка внешний URL-файл выглядит нормально и воспроизводится / приостанавливается, но не локальный файл.

Вопрос:

  • Также какова точная причина URL http://....mp3 файл воспроизводится, а мой локальный нет?

Проблема:

  • Состояние сети: Status Code: 206 Partial Content
  • Ошибка консоли Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

HTML: 

    <div class="music-player">
        <audio
          ref="audio"
          preload="auto"
          volume="0.1"
          muted
          loop
        >
          <source :src="file" />
        </audio>
        <div @click="toggleSound(file)" class="toggle-sound paused"></div>
      </div>

JS: 

    data: () => ({
      ...,
      file: "/public/audio/bg-music.mp3"
    }),
    methods: {
    toggleSound() {
        let audio = this.$refs.audio;
        if (
          audio.paused &&
          document.querySelector(".toggle-sound").classList.contains("paused")
        ) {
          console.log("play it")
          audio.play();
          document.querySelector(".toggle-sound").classList.remove("paused");
        } else {
          console.log("pause it")
          audio.pause();
          document.querySelector(".toggle-sound").classList.add("paused");
        }
      },
    }

1 Ответ

0 голосов
/ 11 июля 2020

Я просто добавил audio sr c в тег audio, как показано ниже, и это сработало! 

<div class="music-player">
    <audio
      ref="audio"
      src="@/assets/audio/bg-music.ogg"
      preload
      loop
      id="audio"
      muted
    ></audio>
    <div @click="toggleSound()" class="toggle-sound"></div>
  </div>
...