User Story: Sound integration

Value proposition

As a user I want to hear athmospheric and calming sound, so I can have an emersive experience while reflecting my mood

Preparations:

flow.js:

[ ] import audio file
[ ] declare an audioPlaying useState
[ ] add syntax after FlowContainer component to mount PlaySound for when the page index is > 0
[ ] add states audioPlaying, page to PlaySound and image src for audio file
[ ] continue with syntax to mount PlayButton when the page index equals 1
[ ] add function hanndleIsPlaying and state audioPlayingto PlayButton

PlaySound.js:

[ ] create PlaySound.js inside an euqally named folder and add it to components folder
[ ] import useRef, useEffect, useState
[ ] write function PlaySound and pass props src, play, pageIndex
[ ] declare useRef variable and set initial state to null
[ ] declare useState variable for currentVolume with inital state of 0.5
[ ] write logic for useEffect:
[ ] check if audioPlayingis true and useRef variable is not null->
[ ] tif both apply currentVolume sets volume for <audio> ->
[ ] and calls play() function to start playing the audio file
[ ] add audioPlaying and currentVolume to dependancy array
return:
[ ] <audio> with ref,srcandloop`
[ ] and pass pageIndex, currentVolume, setCurrentVolume
[ ] export function

DecreaseVolume.js:

[ ] import useEffect
[ ] write function DecreaseVolume and pass props pageIndex, currentVolume, setCurrentVolume
[ ] write logic foruseEffect:
[ ] if pageIndex > 1 start setInterval
[ ] if currentVolume > 0 decrease Volume by -1 every 50ms
[ ] return: clearInterval
[ ] add pageIndex, currentVolume, setCurrentVolume to dependency array

PlayButton.js: