Commit 80f63d1c authored by Chen Jiping's avatar Chen Jiping

feat:增加音效,更换勋章图片、字体

parent 727854bd
lib/images/excellent.png

7.08 KB | W: | H:

lib/images/excellent.png

28.6 KB | W: | H:

lib/images/excellent.png
lib/images/excellent.png
lib/images/excellent.png
lib/images/excellent.png
  • 2-up
  • Swipe
  • Onion skin
lib/images/great.png

6.41 KB | W: | H:

lib/images/great.png

23.8 KB | W: | H:

lib/images/great.png
lib/images/great.png
lib/images/great.png
lib/images/great.png
  • 2-up
  • Swipe
  • Onion skin
lib/images/nicetry.png

7.46 KB | W: | H:

lib/images/nicetry.png

31.2 KB | W: | H:

lib/images/nicetry.png
lib/images/nicetry.png
lib/images/nicetry.png
lib/images/nicetry.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -3,6 +3,24 @@ body {
background: #fff;
}
@font-face
{
font-family: 'Aileron-Black';
src: url("../lib/font/Aileron-Black.ttf") ;
}
@font-face
{
font-family: 'Aileron-Bold';
src: url("../lib/font/Aileron-Bold.ttf") ;
}
@font-face
{
font-family: 'DroidSansFallback';
src: url("../lib/font/DroidSansFallback.ttf") ;
}
.content {
position: absolute;
left: 0px;
......@@ -36,7 +54,7 @@ body {
.title{
object-fit: contain;
font-family: PingFangSC;
font-family: Aileron-Black;
font-size: 42px;
font-weight: 600;
font-stretch: normal;
......@@ -388,7 +406,7 @@ body {
color: #fff;
line-height: 100px;
font-size: 25px;
bottom: 14%;
bottom: 16%;
left: 4%;
}
......@@ -420,7 +438,7 @@ body {
.submit {
position: absolute;
font-family: HiraKakuStd-W8;
font-family: Aileron-Black;
font-size: 52px;
font-weight: normal;
font-stretch: normal;
......@@ -434,7 +452,7 @@ body {
}
.warning{
font-family: PingFangSC;
font-family: Aileron-Bold;
font-size: 48px;
font-weight: 600;
font-stretch: normal;
......@@ -451,7 +469,7 @@ body {
background-color: #f1e4c2;
width: 300px;
height: 80px;
font-family: PingFangSC;
font-family: Aileron-Black;
font-size: 40px;
font-weight: 600;
font-stretch: normal;
......@@ -474,7 +492,7 @@ body {
}
.loading-text{
font-family: PingFangSC;
font-family: Aileron-Bold;
font-weight: 600;
font-stretch: normal;
font-style: normal;
......@@ -503,7 +521,7 @@ body {
.score{
position: absolute;
width: 100%;
height: 38%;
height: 40%;
top: 0;
left: 0;
right: 0;
......@@ -519,12 +537,13 @@ body {
.score .medal{
position: absolute;
top: 6%;
margin-left: -100px;
margin-left: -90px;
height: 200px;
}
.score .val{
object-fit: contain;
font-family: HiraKakuStd-W8;
font-family: Aileron-Bold;
font-size: 60px;
font-weight: normal;
font-stretch: normal;
......@@ -535,12 +554,12 @@ body {
color: #ffffff;
position: absolute;
margin-left: -32px;
margin-top: 90px;
margin-top: 105px;
}
.score .tips{
object-fit: contain;
font-family: HiraKakuStd-W8;
font-family: Aileron-Bold;
font-size: 64px;
font-weight: normal;
font-stretch: normal;
......@@ -557,13 +576,13 @@ body {
background-color: #3e9b31;
border-radius: 40px;
margin-left: 20%;
margin-top: 30px;
margin-top: 8px;
}
.sub-score thead{
object-fit: contain;
font-family: PingFangSC;
font-size: 24px;
font-family: Aileron-Bold;
font-size: 20px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
......@@ -575,8 +594,8 @@ body {
.sub-score tbody{
object-fit: contain;
font-family: HiraKakuStd-W8;
font-size: 30px;
font-family: Aileron-Bold;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
......@@ -589,8 +608,8 @@ body {
.detail{
position: absolute;
width: 100%;
height: 62%;
top: 38%;
height: 60%;
top: 40%;
left: 0;
right: 0;
}
......@@ -622,7 +641,7 @@ body {
.hr{
height: 10px;
width: 96%;
margin-top: 50px;
margin-top: 10px;
background-image: url(../lib/images/line.png);
margin-left: 2%;
}
......@@ -637,7 +656,7 @@ body {
padding: 20px 50px;
margin-left: 5%;
object-fit: contain;
font-family: PingFangSC;
font-family: DroidSansFallback;
font-size: 36px;
font-weight: 600;
font-stretch: normal;
......
......@@ -126,7 +126,7 @@
<div class="score">
<img src="../lib/images/excellent.png" class="medal">
<span id="score" class="val">90</span>
<h1 style="margin-top: 230px;"><span class="tips">Great!</span></h1>
<h1 style="margin-top: 210px;"><span class="tips">Great!</span></h1>
<div class='sub-score'>
<table style="width: 100%; height: 84%; position: relative; top: 16%;">
<thead>
......
......@@ -17,11 +17,19 @@ var ROLE = null;
var defaultData = '{"stuImage":"http://staging-teach.cdn.ireadabc.com/0623b0c0d8b1da234f64959a8826e113.jpg","video":"http://staging-teach.cdn.ireadabc.com/bcb8b751b98371ea71956a1d1a447956.mp4"}';
// 资源
var rawImages = new Map();
var rawAudios = new Map();
var images = new Map();
var audioObj = {};
// 维护切面数据
var teaUserAspect = {
isSendQuestion: false, // 是否是答题环节
bindData: null,
totalTime : 0
totalTime: 0
};
var stuUserAspect = {
speed: 1,//播放速度
......@@ -32,7 +40,7 @@ var stuUserAspect = {
firstClickRecorder: true, //是否第一次点击录音
firstClickCancel: true,//是否第一次点击撤销按钮
isEnd: false,
isDelTemp:false,//是否删除临时录音
isDelTemp: false,//是否删除临时录音
};
//进度条刷新是否启动
......@@ -48,6 +56,13 @@ $(function () {
USERINFO = window.air.airClassInfo.user;
ROLE = USERINFO.classRole;
// 初始化 音频资源
initAudio(data);
// 初始化 图片资源
initImg(data);
loadResources().then(() => {
const playView = new PlayView(data);
playView.init();
......@@ -61,10 +76,119 @@ $(function () {
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window.air.hideAirClassLoading(key, this.data);
});
}, key);
})
function loadResources() {
const pr = [];
rawImages.forEach((value, key) => {// 预加载图片
const p = preload(value)
.then(img => {
images.set(key, img);
})
.catch(err => console.log(err));
pr.push(p);
});
rawAudios.forEach((value, key) => {// 预加载音频
const a = preloadAudio(value)
.then(() => {
// this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(a);
});
return Promise.all(pr);
}
function preload(url) {
return new Promise((resolve, reject) => {
const img = new Image();
// img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
function preloadAudio(url) {
return new Promise((resolve, reject) => {
const audio = new Audio();
audio.oncanplay = (a) => {
resolve(a);
};
audio.onerror = () => {
reject();
};
audio.src = url;
audio.load();
});
}
function addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj;
if (url == null) {
url = key;
}
rawAudios.set(key, url);
const audio = new Audio();
audio.src = url;
audio.load();
audio.loop = loop;
audio.volume = vlomue;
audioObj[key] = audio;
if (callback) {
audio.onended = () => {
callback();
};
}
}
function playAudio(key, now = false, callback = null) {
const audio = audioObj[key];console.log(audio);
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
return audio;
}
function initAudio(data) {
this.addUrlToAudioObj('submit', "../lib/redio/submit.mp3");
this.addUrlToAudioObj('click', "../lib/redio/click.mp3");
this.addUrlToAudioObj('fade', "../lib/redio/fade.mp3");
}
function initImg(data) {
}
class PlayView {
data;
......@@ -82,10 +206,8 @@ class PlayView {
this.initView();
}
initDefaultData() {
if (!this.data) {
......@@ -96,6 +218,7 @@ class PlayView {
}
initData() {
teaUserAspect.bindData = this.data;
}
......@@ -225,7 +348,7 @@ function recoverPage(aspect) {
$("#curTime").append(getTimeStr(videoCurTime));
//已经录制
if(recorderArr.length > 0){
if (recorderArr.length > 0) {
let length = recorderArr.length;
let last = recorderArr[length - 1];
......@@ -233,11 +356,11 @@ function recoverPage(aspect) {
$("#submitBtn").show();
//如果没有删除最后一段,则显示删除按钮
if(stuUserAspect.isDelTemp){
if (stuUserAspect.isDelTemp) {
//重新绘画进度条
drawProgress($("#progressbar"), last.endTime);
}
else{
else {
console.log("-----------")
console.log(last.endTime - last.startTime, teaAspect.totalTime)
//重新绘画进度条
......@@ -246,15 +369,15 @@ function recoverPage(aspect) {
$("#backBtn").show();
if(!stuUserAspect.firstClickCancel){
if (!stuUserAspect.firstClickCancel) {
$(".back-tips").hide();
}
else{
else {
$(".back-tips").show();
}
}
if(!stuUserAspect.firstClickRecorder){
if (!stuUserAspect.firstClickRecorder) {
$(".recorder-tips").hide();
}
}
......@@ -314,6 +437,8 @@ function bindRecorderBtn() {
$(".recorder-play-icon").click(function () {
playAudio('click', true);
if (stuUserAspect.firstClickRecorder) {
$(".recorder-tips").hide();
stuUserAspect.firstClickRecorder = false;
......@@ -496,6 +621,8 @@ function bindSentBtn() {
$(".sent-btn").click(function () {
playAudio('click', true);
//设置已经发题
teaUserAspect.isSendQuestion = true;
......@@ -529,6 +656,7 @@ function bindBackBtn() {
bindPressAnimation(backBtn);
backBtn.click(function () {
playAudio('click', true);
if (stuUserAspect.firstClickCancel) {
$(".back-tips").hide();
stuUserAspect.firstClickCancel = false;
......@@ -548,7 +676,7 @@ function bindBackBtn() {
stuUserAspect.isDelTemp = true;
}
if(stuUserAspect.recorderArr.length == 0){
if (stuUserAspect.recorderArr.length == 0) {
$("#submitBtn").hide();
}
......@@ -566,6 +694,7 @@ function bindSubmitBtn() {
bindPressAnimation(submitBtn);
submitBtn.click(function () {
playAudio('submit', true);
$("#submitDialog").modal('show');
});
}
......@@ -599,13 +728,13 @@ function drawProgress(progressbar, duration, totalTime) {
let tempTotalTime = totalTime;
//加载成功
if(video && video.readyState > 0 ){
if (video && video.readyState > 0) {
tempTotalTime = video.duration;
}
let progress = 0;
if(tempTotalTime && tempTotalTime != 0){
if (tempTotalTime && tempTotalTime != 0) {
progress = Math.floor(duration / tempTotalTime * 100 * 100) / 100;
}
......@@ -618,9 +747,15 @@ function drawProgress(progressbar, duration, totalTime) {
* 继续录制操作
*/
function bindContinueBtnBtn() {
$('#submitDialog').on('shown.bs.modal', function (e) {
playAudio('fade', true);
})
const continueBtn = $("#continueBtn");
bindPressAnimation(continueBtn, 'submit-press');
continueBtn.click(function () {
playAudio('click', true);
$("#submitDialog").modal('hide');
})
......@@ -633,6 +768,9 @@ function bindConfirmBtn() {
const confirmBtn = $("#confirmBtn");
bindPressAnimation(confirmBtn, 'submit-press');
confirmBtn.on('click', function () {
playAudio('click', true);
$("#submitDialog").modal('hide');
$("#progressModal").modal('show');
......@@ -649,7 +787,7 @@ function bindConfirmBtn() {
cw.greadPapersForText(text, function (data) {
stuUserAspect.recorderScoreObj = {
result:data,
result: data,
text: text
};
stuUserAspect.isEnd = true;
......
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