See last commit message

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>

frontend/src/Components/Music.tsx

+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;

frontend/src/SVGs.tsx

 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>,

frontend/src/react-app-env.d.ts

 /// <reference types="react-scripts" />
+declare module '*.mp3' {
+    const src: string;
+    export default src;
+}
\ No newline at end of file