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

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

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