@@ -0,0 +1,17 @@ | |||||
import * as React from 'react'; | |||||
export interface ScoreProps { | |||||
id: string; | |||||
alt: string; | |||||
} | |||||
export const Score: React.FC<ScoreProps> = ({ | |||||
id, | |||||
alt, | |||||
}) => { | |||||
return ( | |||||
<a href={`scores/${id}.musicxml`}> | |||||
<img src={`scores/${id}.svg`} alt={alt} /> | |||||
</a> | |||||
) | |||||
}; |
@@ -3,10 +3,15 @@ title: Trills | |||||
layout: ../layouts/Layout.astro | layout: ../layouts/Layout.astro | ||||
--- | --- | ||||
import {Score} from '../components/Score'; | |||||
I have attended the session where I was supposed to demonstrate the trills I had been working for the past few days. I | I have attended the session where I was supposed to demonstrate the trills I had been working for the past few days. I | ||||
started with the third movement of Haydn Piano Sonata No. 6: | started with the third movement of Haydn Piano Sonata No. 6: | ||||
<img src="/api/assets/haydn-piano-sonata-6-slice01.svg" alt="" /> | |||||
<Score | |||||
id="haydn-piano-sonata-6-slice01" | |||||
alt="Haydn Piano Sonata No. 6, measures 1-3" | |||||
/> | |||||
Sir demonstrated to me where the "Adagio" is meant for, as the pulse is made out of quarter notes. He gestured to me | Sir demonstrated to me where the "Adagio" is meant for, as the pulse is made out of quarter notes. He gestured to me | ||||
the 4/4 time signature and said the grouping is made out of 6 notes--"imagine the pulse is made out of sextuplets". | the 4/4 time signature and said the grouping is made out of 6 notes--"imagine the pulse is made out of sextuplets". | ||||
@@ -69,9 +69,9 @@ const processOutput = (xmlData: string) => { | |||||
}; | }; | ||||
export const GET: APIRoute = async ({ params }) => { | export const GET: APIRoute = async ({ params }) => { | ||||
console.log('asdfasdf'); | |||||
const verovioModule = await createVerovioModule(); | const verovioModule = await createVerovioModule(); | ||||
verovioModule.FS_createDataFile('', 'bravura', 'asdfasdf', true, false, true); | |||||
const score = await readFile(`src/assets/${params.asset}.musicxml`, 'utf-8'); | |||||
const score = await readFile(`public/scores/${params.asset}.musicxml`, 'utf-8'); | |||||
const verovioToolkit = new VerovioToolkit(verovioModule); | const verovioToolkit = new VerovioToolkit(verovioModule); | ||||
const filteredScore = filter(score); | const filteredScore = filter(score); | ||||
const isSuccessful = verovioToolkit.loadData(filteredScore); | const isSuccessful = verovioToolkit.loadData(filteredScore); | ||||
@@ -107,7 +107,7 @@ export const GET: APIRoute = async ({ params }) => { | |||||
}; | }; | ||||
export const getStaticPaths: GetStaticPaths = async () => { | export const getStaticPaths: GetStaticPaths = async () => { | ||||
const files = await readdir('src/assets'); | |||||
const files = await readdir('public/scores'); | |||||
return files | return files | ||||
.filter((f) => f.endsWith('.musicxml')) | .filter((f) => f.endsWith('.musicxml')) | ||||
.map((f) => ({ | .map((f) => ({ |
@@ -3,7 +3,7 @@ export default { | |||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], | content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], | ||||
theme: { | theme: { | ||||
fontFamily: { | fontFamily: { | ||||
body: ['Century', 'serif'], | |||||
body: ['Times New Roman', 'Times', 'serif'], | |||||
}, | }, | ||||
extend: { | extend: { | ||||
}, | }, | ||||