Closed dreamevilgf closed 3 months ago
Hi @dreamevilg
This problem is a bit unfortunate but does not cause the problem of alphaTab not showing up. We actually should not ship the source maps at all. They point back to the original typescript codebase from which we compiled. These sources are not shipped (on purpose) but leading to warnings in the Vite tooling. I added https://github.com/CoderLine/alphaTab/issues/1503 as separate bug for that.
The problem in your setup is, that with the defaults you point to the wrong URL where alphaTab can find its font files. The documentation is missing this important detail and I'll have to extend this info. The plugin cannot inject such general alphaTab runtime settings yet, but it would be a good idea to also change these defaults. Until then you have to specify the path to the font directory manually:
https://github.com/CoderLine/alphaTabSamplesWeb/blob/main/src/vite-vue/src/App.vue#L12
<template>
<h1>Test</h1>
<div ref="alphaTab" data-tex="true">
\title "Hello alphaTab"
.
:4 0.6 1.6 3.6 0.5 2.5 3.5 0.4 2.4 |
3.4 0.3 2.3 0.2 1.2 3.2 0.1 1.1 |
3.1.1
</div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue"
import { AlphaTabApi } from "@coderline/alphatab"
const alphaTab = ref<HTMLElement | null>(null)
const api = ref<AlphaTabApi | null>(null)
onMounted(async () => {
console.log(alphaTab.value)
if(alphaTab.value) {
api.value = new AlphaTabApi(alphaTab.value!, {
+ core: {
+ fontDirectory: '/font/'
+ }
})
}
})
</script>
<style scoped>
</style>
I added information about the fontDirectory and everything worked, thanks!
Is there an existing issue for this?
Current Behavior
Hi, I tried to use version 1.3 with vite plugin and encoutred with issue on init Api in component.
Get message in terminal
And get error message in browser
I would be very grateful if you could tell me what I'm doing wrong
Expected Behavior
AlphaTabApi init player on web page
Steps To Reproduce
yarn create vite my-vue-app --template vue
// https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), alphaTab() ], })
Test
Anything else?
No response