-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: added audio asset support * chore: pnpm lock * chore: new generator file * fix: tests * chore: changeset * chore: formatting * fix: various fixes * fix: tests * chore: fixes
- Loading branch information
1 parent
84d03bf
commit fcbe995
Showing
23 changed files
with
1,248 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@dotlottie/dotlottie-js": minor | ||
--- | ||
|
||
adds audio asset support |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
/** | ||
* Copyright 2023 Design Barn Inc. | ||
*/ | ||
|
||
/** | ||
* Current status: | ||
* - Exporting correctly as a dotLottie | ||
* - todo: test if it plays | ||
* - todo: multi asset support | ||
*/ | ||
|
||
import fs from 'fs'; | ||
|
||
import { DotLottie } from '@dotlottie/dotlottie-js/node'; | ||
import { getAnimation, getAudio, getAllAudio } from '@dotlottie/dotlottie-js/node'; | ||
|
||
// const dotLottie = new DotLottie(); | ||
|
||
// const dl = await | ||
// dotLottie | ||
// .setAuthor('Sam!') | ||
// .setVersion('1.0') | ||
// .addAnimation({ | ||
// id: 'audio', | ||
// // url: 'https://assets10.lottiefiles.com/packages/lf20_tykuirhr.json', | ||
// url: 'https://lottie.host/d9f7a848-50ab-4d42-805f-0e5a5f686ebe/6JE9gErlEZ.json' | ||
// }) | ||
// .build() | ||
// .then((value) => { | ||
// return value.toArrayBuffer(); | ||
// }) | ||
// .then(async (value) => { | ||
// const filename = 'multiple_audio.lottie'; | ||
|
||
// console.log('> Writing to file: ', filename); | ||
|
||
// fs.writeFileSync(filename, Buffer.from(value)); | ||
|
||
// console.log('> Writing inlined file from getAnimation 🪄'); | ||
|
||
// const anim = await getAnimation(new Uint8Array(value), 'audio', { | ||
// inlineAssets: true | ||
// }); | ||
|
||
// fs.writeFileSync("audio_inlined.json", JSON.stringify(anim)); | ||
|
||
// // -------–––-------–––-------–––-------–––-------–––-------––– | ||
|
||
// console.log('> Using DotLottie.fromArrayBuffer 🪄'); | ||
|
||
// let ad = new DotLottie(); | ||
|
||
// ad = await ad.fromArrayBuffer(value); | ||
|
||
// fs.writeFileSync("audio_inlined_from_array.json", Buffer.from(await ad.toArrayBuffer())); | ||
|
||
// // console.log(ad); | ||
// // console.log("\n\n\n\n\n") | ||
|
||
// // console.log(await ad.getAnimation('audio')); | ||
// // console.log(await ad.getAnimation('audio').audioAssets); | ||
// }); | ||
|
||
const double = new DotLottie(); | ||
|
||
const doubleAnimation = await double | ||
.setAuthor('Sam!') | ||
.setVersion('1.0') | ||
.addAnimation({ | ||
id: 'audio_0', | ||
// url: 'https://assets10.lottiefiles.com/packages/lf20_tykuirhr.json', | ||
url: 'https://lottie.host/d9f7a848-50ab-4d42-805f-0e5a5f686ebe/6JE9gErlEZ.json', | ||
}) | ||
.addAnimation({ | ||
id: 'audio_1', | ||
// url: 'https://assets10.lottiefiles.com/packages/lf20_tykuirhr.json', | ||
// url: 'https://lottie.host/d9f7a848-50ab-4d42-805f-0e5a5f686ebe/6JE9gErlEZ.json' | ||
url: 'https://lottie.host/a9b21c95-dfb7-457e-9916-f6b7942d7479/CtLEGpLFCs.json', | ||
}) | ||
// .addAnimation({ | ||
// id: 'audio', | ||
// // url: 'https://assets10.lottiefiles.com/packages/lf20_tykuirhr.json', | ||
// // url: 'https://lottie.host/d9f7a848-50ab-4d42-805f-0e5a5f686ebe/6JE9gErlEZ.json' | ||
// url: 'https://lottie.host/a9b21c95-dfb7-457e-9916-f6b7942d7479/CtLEGpLFCs.json' | ||
// }) | ||
.build() | ||
.then((value) => { | ||
return value.toArrayBuffer(); | ||
}) | ||
.then(async (value) => { | ||
const filename = 'double_audio_animation.lottie'; | ||
|
||
console.log('> Writing to file: ', filename); | ||
|
||
fs.writeFileSync(filename, Buffer.from(value)); | ||
|
||
const audio = await getAudio(new Uint8Array(value), 'audio_1.mpeg'); | ||
const allAudio = await getAllAudio(new Uint8Array(value)); | ||
console.log('Received audio:'); | ||
console.log(audio); | ||
|
||
// console.log(allAudio) | ||
|
||
// let ad = new DotLottie(); | ||
|
||
// ad = await ad.fromArrayBuffer(value); | ||
|
||
// const audio_0 = await ad.getAnimation('audio_0'); | ||
// const audio_1 = await ad.getAnimation('audio_1'); | ||
|
||
// fs.writeFileSync("audio_0.json", JSON.stringify(await audio_0.toJSON({ | ||
// inlineAssets: true | ||
// }))); | ||
// fs.writeFileSync("audio_1.json", JSON.stringify(await audio_1.toJSON({ | ||
// inlineAssets: true | ||
// }))); | ||
|
||
const anim_0 = await getAnimation(new Uint8Array(value), 'audio_0', { | ||
inlineAssets: true, | ||
}); | ||
const anim_1 = await getAnimation(new Uint8Array(value), 'audio_1', { | ||
inlineAssets: true, | ||
}); | ||
fs.writeFileSync('anim_0.json', JSON.stringify(anim_0)); | ||
fs.writeFileSync('anim_1.json', JSON.stringify(anim_1)); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>Player</title> | ||
<!-- <link rel="stylesheet" type="text/css" href="css/player.css" /> --> | ||
</head> | ||
<style> | ||
.container { | ||
display: block; | ||
margin: auto; | ||
width: 100%; | ||
height: 400px; | ||
background-color: black; | ||
} | ||
#p-container { | ||
margin-top: 300px; | ||
display: block; | ||
margin: auto; | ||
width: 512px; | ||
height: 512px; | ||
background-color: cyan; | ||
} | ||
</style> | ||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js"></script> | ||
<script src="https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.11/lottie.min.js"></script> | ||
<script src="https://unpkg.com/@dotlottie/player-component@2.5.1/dist/dotlottie-player.js"></script> | ||
<body> | ||
<div style="display: flex"> | ||
<div id="animation-container" class="container"></div> | ||
<!-- <lottie-player | ||
class="p-container" | ||
src="https://lottie.host/d9f7a848-50ab-4d42-805f-0e5a5f686ebe/6JE9gErlEZ.json" | ||
controls | ||
></lottie-player> | ||
<dotlottie-player class="p-container" src="double_audio_animation.lottie" controls></dotlottie-player> --> | ||
|
||
<!--------- --> | ||
<lottie-player class="p-container" src="./anim_0.json" controls></lottie-player> | ||
<dotlottie-player class="p-container" src="./anim_0.json" controls></dotlottie-player> | ||
|
||
<lottie-player class="p-container" src="./anim_1.json" controls></lottie-player> | ||
<dotlottie-player class="p-container" src="./anim_1.json" controls></dotlottie-player> | ||
</div> | ||
</body> | ||
<script> | ||
let animContainer = document.getElementById('animation-container'); | ||
|
||
// let anim = lottie.loadAnimation({ | ||
// container: animContainer, | ||
// name: 'lottie-web-test', | ||
// renderer: 'svg', | ||
// loop: false, | ||
// autoplay: false, | ||
// path: 'https://lottie.host/d9f7a848-50ab-4d42-805f-0e5a5f686ebe/6JE9gErlEZ.json', | ||
|
||
// // path:'https://lottie.host/946d542b-63da-44ba-9d27-700872055cf3/LU83buFliM.json' | ||
// }); | ||
|
||
animContainer.addEventListener('click', () => { | ||
anim.goToAndPlay(0, true); | ||
}); | ||
</script> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.