This project allows you to generate your own responsive web songbook.
- Access all your songbooks and band music files
- Support for multiple songsheets per song in different keys
- Easy printing
- ! The whole songbook is offline accessible !
- You can install the songbook on your mobile device (iOS > 12, Android)
- Install
npm(just download NodeJS,npmwill be installed right away) - To create .html files out of your chordpro files you need the Songsheet Generator by Ten by Ten Software.
(you can also use yarn as a package manager)
- Download the latest release (you can find all releases here - currently Songbook v1.1)
git clone --branch v1.1 --single-branch https://github.com/kumboleijo/Songbook cd <DIRECTORY>and runnpm i- run
npm run dev
- Use the Songsheet Generator to convert a song from the chordpro file format to html
- Copy this file into
src/assets/songs/{ArtistName}/ - Register your song in
Data.vuelocated insrc/components/
Example
File: Data.vue
...
// song imports
import Hurt from '../assets/songs/JohnnyCash/hurt.html'
...
...
data() {
return {
currentSongbook: { name: 'Choose Songbook', date: '', songs: [] },
currentSong: { id: 0, name: 'Choose Song', artist: '', file: '', infos: [] },
// put your song files here
songs:
{
hurt: {
name: 'Hurt', artist: 'Johnny Cash',
files: [
{ capo: 0, file: Hurt }
], infos: [
// you can add as many info boxes as you want per song
// structure: { info: info, value: value }
{ info: 'Main Vocals', value: 'A' },
{ info: 'Backing Vocals', value: 'B, C' },
{ info: 'Keys', value: 'E-Piano' },
{ info: 'Rh. Git', value: 'E-Git' }
], stageDirections: {
// you can put as many parts as you want per song
parts: [
{
name: 'Intro / Solo', values: [
'A-Git', 'E-Git'
]
},
{
name: 'Verse', values: [
'Reverb'
]
},
{
name: 'Outro', values: [
'A-Git', 'E-Git'
]
}
]
}
}
}
}
...- Add the song to a songbook
Example
File: Data.vue
export default {
name: 'Grid',
created() {
let mySongbooks = [
// this songbook will be auto generated and will contain all songs :)
{ name: 'All Songs', date: '', songs: [] },
// #############################################################
{
name: 'My first Concert', date: '01.01.1970', songs: [
this.songs.hurt
]
}
]
...- Update package.json with your band infos
"bandName": "{Your Bandname}",
"bandImage": "./static/{your_cover_file}.png",
"iconPath": "./src/assets/icons/{your_icon_file}.png",# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report