Commit 65e4a317 authored by Chen Jiping's avatar Chen Jiping

feat:调整音频逻辑及显示字体

parent ba8c6d0e
...@@ -8,84 +8,54 @@ ...@@ -8,84 +8,54 @@
<div nz-row> <div nz-row>
<div nz-col [nzSpan]="23" nzOffset="1"> <div nz-col [nzSpan]="23" nzOffset="1">
<nz-divider nzText="内容编辑" nzOrientation="left"></nz-divider> <nz-divider nzText="内容编辑" nzOrientation="left"></nz-divider>
<!--
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="guideAudioUrl1">字母</nz-form-label> <nz-form-label [nzSpan]="2">图片</nz-form-label>
<nz-form-control [nzSpan]="4"> <nz-form-control [nzSpan]="4">
<input type="text" nz-input [(ngModel)]="item.letter" (blur)="save()"> <app-upload-image-with-preview style="width: 100%" [picUrl]="item.exercises.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.exercises, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="guideAudioUrl1">CC引导音频1</nz-form-label> <nz-form-label [nzSpan]="2" nzFor="add-btn">字母添加</nz-form-label>
<nz-form-control [nzSpan]="4"> <nz-form-control [nzSpan]="4">
<app-audio-recorder [audioUrl]="item.guideAudioUrl1" id="guideAudioUrl1" <button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addWordItem(item.exercises)" [disabled]="item.exercises.wordArr.length == 2 ? true : false">
(audioUploaded)="onAudioUploadSuccess($event, item, 'guideAudioUrl1')"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</app-audio-recorder> </button>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="guideAudioUrl2">CC引导音频2</nz-form-label> <nz-form-control [nzOffset]="2" [nzSpan]="21">
<nz-form-control [nzSpan]="4"> <nz-collapse nzAccordion>
<app-audio-recorder [audioUrl]="item.guideAudioUrl2" id="guideAudioUrl2" <nz-collapse-panel *ngFor="let data of item.exercises.wordArr; let i=index" [nzHeader]="'字母' + (i + 1)" [nzActive]="true" [nzShowArrow]="false">
(audioUploaded)="onAudioUploadSuccess($event, item, 'guideAudioUrl2')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="guideAudioUrl3">CC引导音频3</nz-form-label> <nz-form-label [nzSpan]="2">字母</nz-form-label>
<nz-form-control [nzSpan]="4"> <nz-form-control [nzSpan]="4">
<app-audio-recorder [audioUrl]="item.guideAudioUrl3" id="guideAudioUrl3" <input type="text" nz-input [(ngModel)]="data.val" (blur)="save()" maxlength="1"><label style="color: red;">请先点击【音频编辑】按钮后再进行音频编缉</label>
(audioUploaded)="onAudioUploadSuccess($event, item, 'guideAudioUrl3')">
</app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
-->
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2">图片</nz-form-label> <button nz-button nzType="dashed" id="edit-btn" (click)="setLRC(data)">
<nz-form-control [nzSpan]="4"> <i nz-icon nzType="edit" nzTheme="outline"></i>音频编辑
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.exercises.picUrl" </button>
(imageUploaded)="onImageUploadSuccess($event, item.exercises, 'picUrl')"> <button nz-button nzType="danger" id="del-btn" (click)="delWord(item.exercises, i)">
</app-upload-image-with-preview> <i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>
</nz-form-item>
</nz-collapse-panel>
</nz-collapse>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="add-btn">字母添加</nz-form-label> <nz-form-label [nzSpan]="2">音频编辑</nz-form-label>
<nz-form-control [nzSpan]="4"> <nz-form-control [nzSpan]="4">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addWordItem(item.exercises)" [disabled]="item.exercises.wordArr.length == 2 ? true : false"> <h3>字母{{modifyItem.val}}</h3>
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-control [nzOffset]="2" [nzSpan]="15"> <nz-form-control [nzOffset]="2" [nzSpan]="18">
<nz-table #wordTable nzBordered [nzData]="item.exercises.wordArr" nzBordered nzTitle="字母数组" <app-lrc-editor [LRCData]="modifyItem.lrcData" (editFinished)="getLRC($event, modifyItem)">
[nzShowPagination]=true> </app-lrc-editor>
<thead>
<tr>
<th>序号</th>
<th>字母</th>
<th>音频</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of wordTable.data;let j = index">
<td>{{ j+1 }}</td>
<td><input type="text" nz-input [(ngModel)]="row.val" (blur)="save()" maxlength="1"></td>
<td>
<app-audio-recorder [audioUrl]="row.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, row, 'audioUrl')">
</app-audio-recorder>
</td>
<td>
<button nz-button nzType="dashed" id="del-btn" (click)="delWord(item.exercises, j)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
......
...@@ -15,6 +15,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -15,6 +15,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存对象 // 储存对象
item; item;
modifyItem;
isVisible = false;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
} }
...@@ -68,6 +72,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -68,6 +72,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if(!this.item.exercises){ if(!this.item.exercises){
this.item.exercises = getDefaultExercises(); this.item.exercises = getDefaultExercises();
} }
if(!this.modifyItem){
this.modifyItem = {};
}
} }
...@@ -125,6 +133,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -125,6 +133,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (index !== -1) { if (index !== -1) {
item.wordArr.splice(index, 1); item.wordArr.splice(index, 1);
item.wordArr = [...item.wordArr]; item.wordArr = [...item.wordArr];
this.modifyItem = {};
this.save(); this.save();
} }
} }
...@@ -133,7 +142,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -133,7 +142,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
it.lrcData = evt; it.lrcData = evt;
it.audioUrl = evt.audio_url; it.audioUrl = evt.audio_url;
this.save(); this.save();
this.modifyItem = {};
}
setLRC(item){
this.modifyItem = item;
} }
} }
\ No newline at end of file
{
"ver": "1.1.0",
"uuid": "bf7c2ed5-47c2-4aa2-943c-281df16be845",
"subMetas": {}
}
\ No newline at end of file
...@@ -1630,7 +1630,9 @@ ...@@ -1630,7 +1630,9 @@
"_fontSize": 40, "_fontSize": 40,
"_lineHeight": 40, "_lineHeight": 40,
"_enableWrapText": true, "_enableWrapText": true,
"_N$file": null, "_N$file": {
"__uuid__": "bf7c2ed5-47c2-4aa2-943c-281df16be845"
},
"_isSystemFontUsed": false, "_isSystemFontUsed": false,
"_spacingX": 0, "_spacingX": 0,
"_batchAsBitmap": false, "_batchAsBitmap": false,
......
...@@ -113,8 +113,8 @@ cc.Class({ ...@@ -113,8 +113,8 @@ cc.Class({
for (let i = 0; i < wordArr.length; ++i) { for (let i = 0; i < wordArr.length; ++i) {
if (wordArr[i].audioUrl) { if (wordArr[i] && wordArr[i].lrcData) {
this._audioResList.push({ url: wordArr[i].audioUrl }); this._audioResList.push({ url: wordArr[i].lrcData.audio_url });
} }
} }
...@@ -320,6 +320,7 @@ cc.Class({ ...@@ -320,6 +320,7 @@ cc.Class({
let color = new cc.color(); let color = new cc.color();
color.fromHEX('#000000'); color.fromHEX('#000000');
const labelNode = new cc.Node(); const labelNode = new cc.Node();
labelNode.data = word;
labelNode.color = color; labelNode.color = color;
const label = labelNode.addComponent(cc.Label); const label = labelNode.addComponent(cc.Label);
label.lineHeight = size; label.lineHeight = size;
...@@ -346,9 +347,11 @@ cc.Class({ ...@@ -346,9 +347,11 @@ cc.Class({
playAudio(this.audioBtn.clip, () => { playAudio(this.audioBtn.clip, () => {
let audioUrl = word.lrcData.audio_url;
//如果是首字母,则添加点击事件 //如果是首字母,则添加点击事件
if (isInitial) { if (isInitial) {
this.playTextAutio(labelNode, word.audioUrl, () => { this.playTextAutio(labelNode, audioUrl, () => {
this._cantouch = true; this._cantouch = true;
}) })
...@@ -356,7 +359,7 @@ cc.Class({ ...@@ -356,7 +359,7 @@ cc.Class({
else { else {
//显示完,则播放音频 //显示完,则播放音频
if (this._shown) { if (this._shown) {
this.playTextAutio(labelNode, word.audioUrl, () => { this.playTextAutio(labelNode, audioUrl, () => {
this._cantouch = true; this._cantouch = true;
}); });
} }
...@@ -444,6 +447,15 @@ cc.Class({ ...@@ -444,6 +447,15 @@ cc.Class({
//停止监听动画 //停止监听动画
this._stopAni = true; this._stopAni = true;
this._cantouch = true;
this._curIndex++;
this.moveHand(this._curIndex, () => {
this._cantouch = true;
this.showEnd();
})
if (callback) { if (callback) {
callback(); callback();
} }
...@@ -461,6 +473,15 @@ cc.Class({ ...@@ -461,6 +473,15 @@ cc.Class({
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand"); let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 0; handNode.opacity = 0;
let lyrics = labelNode.data.lrcData.lyrics;
//临时音频打点数组
let arr = JSON.parse(JSON.stringify(lyrics));
console.log(arr);
this.monitor(labelNode, audioId, arr);
/*
this.textTwinkle(labelNode, () => { this.textTwinkle(labelNode, () => {
this._cantouch = true; this._cantouch = true;
...@@ -471,6 +492,7 @@ cc.Class({ ...@@ -471,6 +492,7 @@ cc.Class({
this.showEnd(); this.showEnd();
}) })
}); });
*/
}) })
}, },
...@@ -582,7 +604,7 @@ cc.Class({ ...@@ -582,7 +604,7 @@ cc.Class({
}, },
_stopAni: null, _stopAni: null,
monitor(audioId, arr) { monitor(node, audioId, arr) {
if (this._stopAni) { if (this._stopAni) {
return; return;
...@@ -604,13 +626,7 @@ cc.Class({ ...@@ -604,13 +626,7 @@ cc.Class({
if (time < currentTime) { if (time < currentTime) {
//如果是最后一个匹配,则播放内容动画 this.textTwinkle(node);
if (len == 1) {
this.contentAni();
}
else {
this.textAni();
}
//移除匹配上的元素 //移除匹配上的元素
arr.splice(i, 1); arr.splice(i, 1);
...@@ -622,15 +638,18 @@ cc.Class({ ...@@ -622,15 +638,18 @@ cc.Class({
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.monitor(audioId, arr); this.monitor(node, audioId, arr);
}) })
}, },
/** /**
* 文本动画 * 文本内容动画
* @param {*} node
* @param {*} callback
*/ */
_playText: null, _playText: null,
textAni() { textTwinkle(node, callback = null) {
if (this._playText) { if (this._playText) {
return; return;
...@@ -640,27 +659,6 @@ cc.Class({ ...@@ -640,27 +659,6 @@ cc.Class({
this._cantouch = false; this._cantouch = false;
let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text");
let wordNodeArr = textNode.wordNodeArr;
for (let i = 0; i < wordNodeArr.length; ++i) {
let wordNode = wordNodeArr[i];
//如果是首字母,则执行动画
if (wordNode.isInitial) {
this.textTwinkle(wordNode);
}
}
},
/**
* 文本内容动画
* @param {*} node
* @param {*} callback
*/
textTwinkle(node, callback = null) {
cc.tween(node) cc.tween(node)
.to(0.3, { scale: node.initScale * 1.3 }) .to(0.3, { scale: node.initScale * 1.3 })
.to(0.3, { scale: node.initScale }) .to(0.3, { scale: node.initScale })
......
...@@ -3,38 +3,58 @@ export const defaultData = { ...@@ -3,38 +3,58 @@ export const defaultData = {
"wordArr":[ "wordArr":[
{ {
"val":"A", "val":"A",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/8b5ecca5d4509e1b8a7e81e69d8db615.mp3" "lrcData":{
"audio_url":"http://staging-teach.cdn.ireadabc.com/e896863da284cf8ba738caf98d568d39.mp3",
"fontSize":24,
"lineHeight":32,
"lyrics":[
{
"time":0.040271,
"data":"",
"newLine":false
}, },
{ {
"val":"a", "time":1.277515,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/607af37644501e678de6cbafee555948.mp3" "data":"",
"newLine":false
},
{
"time":2.574908,
"data":"",
"newLine":false
} }
], ]
"picUrl":"http://staging-teach.cdn.ireadabc.com/101cdabba6404b73292d3b676f4683b1.png", }
"audioUrl":"http://staging-teach.cdn.ireadabc.com/bbab99eb9f5fe3cbe2d24cf80594d8c9.mp3", },
{
"val":"a",
"lrcData":{ "lrcData":{
"audio_url":"http://staging-teach.cdn.ireadabc.com/bbab99eb9f5fe3cbe2d24cf80594d8c9.mp3", "audio_url":"http://staging-teach.cdn.ireadabc.com/9747c77fc914684e151aac636e1b47b6.mp3",
"fontSize":24, "fontSize":24,
"lineHeight":32, "lineHeight":32,
"lyrics":[ "lyrics":[
{ {
"time":0.503067, "time":0.120777,
"data":"", "data":"",
"newLine":false "newLine":false
}, },
{ {
"time":1.503067, "time":1.158266,
"data":"", "data":"",
"newLine":false "newLine":false
}, },
{ {
"time":3.438793, "time":2.447526,
"data":"", "data":"",
"newLine":false "newLine":false
} }
] ]
} }
} }
],
"picUrl":"http://staging-teach.cdn.ireadabc.com/101cdabba6404b73292d3b676f4683b1.png",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/bbab99eb9f5fe3cbe2d24cf80594d8c9.mp3"
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment