Я делаю веб-сайт, который требует использования маршрутизатора для отображения разных страниц.Я решил использовать React, поскольку он прост в использовании.Однако я наткнулся на проблему при попытке включить звук.
По сути, поскольку я делаю систему маршрутизатора, я не могу заставить свой звук работать так, чтобы, если я меняю страницу, звук не прерывался и продолжался с того места, где он остановился, когда пользователь нажал кнопку, чтобы изменитьстр.
То, что я пытаюсь смоделировать, похоже на звуковую систему Spotify, где при нажатии на список воспроизведения или ссылку на профиль воспроизводимая в настоящее время музыка не прерывается и не перезапускается с самого начала.Мой сайт в настоящее время делает именно это: при смене страницы звук начинается с самого начала.Это связано с тем, что при использовании react-router-dom я считаю, что происходит то, что вся страница снова отображается, а вместе с ней и звук.
Есть ли способ предотвратить этопроисходит?Как я могу обойти это?Спасибо за ваши ответы!
Редактировать: Спасибо за совет, Макс.Вот мой код (App.js):
import React, { Component } from 'react';
import './App.css';
import Navbar from "./components/Navbar";
import Gallery2018 from "./components/Gallery2018";
import Song from "./components/Song";
import Main from "./pages/Main";
import About from "./pages/About";
import Events from "./pages/Events";
import Contact from "./pages/Contact";
import Donate from "./pages/Donate";
import { BrowserRouter, Route } from "react-router-dom"
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Song />
<Navbar />
<Route exact={true} path = "/" render={() => (
<div className = "App">
<Main />
</div>
)}/>
<Route exact={true} path = "/about" render={() => (
<div className = "App">
<About />
</div>
)}/>
<Route exact={true} path = "/events" render={() => (
<div className = "App">
<Events />
</div>
)}/>
<Route exact={true} path = "/contact" render={() => (
<div className = "App">
<Contact />
</div>
)}/>
<Route exact={true} path = "/donate" render={() => (
<div className = "App">
<Donate />
</div>
)}/>
<Route exact={true} path = "/gallery2018" render={() => (
<div className = "App">
<Gallery2018 />
</div>
)}/>
<div className="copyright text-center" id="footer">© 2018 Aligarh Alumni Association New York. All Rights Reserved.</div>
</div>
</BrowserRouter>
);
}
}
export default App;
Большая часть кода здесь довольно избыточна, поэтому я объясню, что вам нужно увидеть.По сути, у меня здесь используется механизм маршрутизатора, а также компонент под названием «Song», код которого находится здесь:
import React, { Component } from "react";
import Sound from "react-sound";
import soundfile from "./tarana.mp3";
class Song extends Component {
render() {
return (
<Sound
url = {soundfile}
playStatus = {Sound.status.PLAYING}
playFromPosition = {8000}
onLoading={this.handleSongLoading}
onPlaying={this.handleSongPlaying}
onFinishedPlaying={this.handleSongFinishedPlaying}
/>
)
}
}
export default Song
Эта песня взята из пакета Reaction-Sound, который предназначен для добавлениямузыка для ваших приложений.С учетом того, как мой код настроен прямо сейчас, в App.js, поскольку у меня есть механизм маршрутизации, при котором я рендеринг страниц при каждом нажатии соответствующей кнопки для изменения страницы, компонент Song также отображается, вызываямузыка для начала с самого начала.Мне бы хотелось, чтобы при смене страницы компонент Song не прерывался при смене страниц.Есть ли способ сделать это, используя пакеты, которые у меня есть в настоящее время?Или я должен изменить свои пакеты?Еще раз спасибо!
Редактировать 2: Кроме того, если вам интересно, где мои кнопки для пути, ссылки находятся в компоненте Navbar.