diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx index 62bb94b231c715b9d4f241252a287bbe8d44c114..2cbb7f6703ef8100683697e32b9abe942e97b608 100644 --- a/frontend/src/Components/ArtPage.tsx +++ b/frontend/src/Components/ArtPage.tsx @@ -4,6 +4,7 @@ import FavoriteButton from './FavoriteButton'; import DropDown from './DropDown'; import NavButton from './NavButton'; import '../Style/ArtPage.css'; +import Music from "./Music"; type props = { @@ -23,6 +24,7 @@ class ArtPage extends React.Component<props> { <FavoriteButton/> <DropDown/> <ExhibitionPiece artId={this.props.pageId}/> + <Music/> <div className={'navbutton left'}> <NavButton changePage={this.props.changePage} direction={"left"}/> </div> diff --git a/frontend/src/Components/Music.tsx b/frontend/src/Components/Music.tsx index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9be01091779b2dcf61f4a96feb55b0aec88afe7e 100644 --- a/frontend/src/Components/Music.tsx +++ b/frontend/src/Components/Music.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import sound from "../Media/bensound-energy.mp3" +const Music = () => { + return ( + <div> + {/** Option for autoplay in Chrome + <iframe src={require('../Media/250-milliseconds-of-silence.mp3')} allow="autoplay" id="audio"/> + **/} + <audio src={require('../Media/bensound-energy.mp3')} controls autoPlay/> + </div> + ); +} + +export default Music; diff --git a/frontend/src/SVGs.tsx b/frontend/src/SVGs.tsx index 696d089f83b756234810412ddd098ed3d4e49b0f..34324a50b788919d71685fb325e547c7c8185174 100644 --- a/frontend/src/SVGs.tsx +++ b/frontend/src/SVGs.tsx @@ -1,9 +1,8 @@ import React from "react"; +import SVG1 from "./SVG/svg1.svg"; export default [ // Collection of Artworks that will be displayed - <svg viewBox={"0 0 200 80"}> - <rect width={"200"} height={80} fill={"blue"} /> - </svg>, + SVG1, <svg viewBox={"0 0 200 80"}> <rect width={"200"} height={80} fill={"red"} /> </svg>, diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts index 6431bc5fc6b2c932dfe5d0418fc667b86c18b9fc..fe3e4debcb767c7f738dd2bdfc87a86cc865c171 100644 --- a/frontend/src/react-app-env.d.ts +++ b/frontend/src/react-app-env.d.ts @@ -1 +1,5 @@ /// <reference types="react-scripts" /> +declare module '*.mp3' { + const src: string; + export default src; +} \ No newline at end of file