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 { ...@@ -3,6 +3,24 @@ body {
background: #fff; 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 { .content {
position: absolute; position: absolute;
left: 0px; left: 0px;
...@@ -36,7 +54,7 @@ body { ...@@ -36,7 +54,7 @@ body {
.title{ .title{
object-fit: contain; object-fit: contain;
font-family: PingFangSC; font-family: Aileron-Black;
font-size: 42px; font-size: 42px;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
...@@ -388,7 +406,7 @@ body { ...@@ -388,7 +406,7 @@ body {
color: #fff; color: #fff;
line-height: 100px; line-height: 100px;
font-size: 25px; font-size: 25px;
bottom: 14%; bottom: 16%;
left: 4%; left: 4%;
} }
...@@ -420,7 +438,7 @@ body { ...@@ -420,7 +438,7 @@ body {
.submit { .submit {
position: absolute; position: absolute;
font-family: HiraKakuStd-W8; font-family: Aileron-Black;
font-size: 52px; font-size: 52px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
...@@ -434,7 +452,7 @@ body { ...@@ -434,7 +452,7 @@ body {
} }
.warning{ .warning{
font-family: PingFangSC; font-family: Aileron-Bold;
font-size: 48px; font-size: 48px;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
...@@ -451,7 +469,7 @@ body { ...@@ -451,7 +469,7 @@ body {
background-color: #f1e4c2; background-color: #f1e4c2;
width: 300px; width: 300px;
height: 80px; height: 80px;
font-family: PingFangSC; font-family: Aileron-Black;
font-size: 40px; font-size: 40px;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
...@@ -474,7 +492,7 @@ body { ...@@ -474,7 +492,7 @@ body {
} }
.loading-text{ .loading-text{
font-family: PingFangSC; font-family: Aileron-Bold;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
...@@ -503,7 +521,7 @@ body { ...@@ -503,7 +521,7 @@ body {
.score{ .score{
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 38%; height: 40%;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
...@@ -518,13 +536,14 @@ body { ...@@ -518,13 +536,14 @@ body {
.score .medal{ .score .medal{
position: absolute; position: absolute;
top: 6%; top: 6%;
margin-left: -100px; margin-left: -90px;
height: 200px;
} }
.score .val{ .score .val{
object-fit: contain; object-fit: contain;
font-family: HiraKakuStd-W8; font-family: Aileron-Bold;
font-size: 60px; font-size: 60px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
...@@ -535,12 +554,12 @@ body { ...@@ -535,12 +554,12 @@ body {
color: #ffffff; color: #ffffff;
position: absolute; position: absolute;
margin-left: -32px; margin-left: -32px;
margin-top: 90px; margin-top: 105px;
} }
.score .tips{ .score .tips{
object-fit: contain; object-fit: contain;
font-family: HiraKakuStd-W8; font-family: Aileron-Bold;
font-size: 64px; font-size: 64px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
...@@ -557,13 +576,13 @@ body { ...@@ -557,13 +576,13 @@ body {
background-color: #3e9b31; background-color: #3e9b31;
border-radius: 40px; border-radius: 40px;
margin-left: 20%; margin-left: 20%;
margin-top: 30px; margin-top: 8px;
} }
.sub-score thead{ .sub-score thead{
object-fit: contain; object-fit: contain;
font-family: PingFangSC; font-family: Aileron-Bold;
font-size: 24px; font-size: 20px;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
...@@ -575,8 +594,8 @@ body { ...@@ -575,8 +594,8 @@ body {
.sub-score tbody{ .sub-score tbody{
object-fit: contain; object-fit: contain;
font-family: HiraKakuStd-W8; font-family: Aileron-Bold;
font-size: 30px; font-size: 26px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
...@@ -589,8 +608,8 @@ body { ...@@ -589,8 +608,8 @@ body {
.detail{ .detail{
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 62%; height: 60%;
top: 38%; top: 40%;
left: 0; left: 0;
right: 0; right: 0;
} }
...@@ -622,7 +641,7 @@ body { ...@@ -622,7 +641,7 @@ body {
.hr{ .hr{
height: 10px; height: 10px;
width: 96%; width: 96%;
margin-top: 50px; margin-top: 10px;
background-image: url(../lib/images/line.png); background-image: url(../lib/images/line.png);
margin-left: 2%; margin-left: 2%;
} }
...@@ -637,7 +656,7 @@ body { ...@@ -637,7 +656,7 @@ body {
padding: 20px 50px; padding: 20px 50px;
margin-left: 5%; margin-left: 5%;
object-fit: contain; object-fit: contain;
font-family: PingFangSC; font-family: DroidSansFallback;
font-size: 36px; font-size: 36px;
font-weight: 600; font-weight: 600;
font-stretch: normal; font-stretch: normal;
......
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
<div class="score"> <div class="score">
<img src="../lib/images/excellent.png" class="medal"> <img src="../lib/images/excellent.png" class="medal">
<span id="score" class="val">90</span> <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'> <div class='sub-score'>
<table style="width: 100%; height: 84%; position: relative; top: 16%;"> <table style="width: 100%; height: 84%; position: relative; top: 16%;">
<thead> <thead>
......
...@@ -17,11 +17,19 @@ var ROLE = null; ...@@ -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 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 = { var teaUserAspect = {
isSendQuestion: false, // 是否是答题环节 isSendQuestion: false, // 是否是答题环节
bindData: null, bindData: null,
totalTime : 0 totalTime: 0
}; };
var stuUserAspect = { var stuUserAspect = {
speed: 1,//播放速度 speed: 1,//播放速度
...@@ -32,7 +40,7 @@ var stuUserAspect = { ...@@ -32,7 +40,7 @@ var stuUserAspect = {
firstClickRecorder: true, //是否第一次点击录音 firstClickRecorder: true, //是否第一次点击录音
firstClickCancel: true,//是否第一次点击撤销按钮 firstClickCancel: true,//是否第一次点击撤销按钮
isEnd: false, isEnd: false,
isDelTemp:false,//是否删除临时录音 isDelTemp: false,//是否删除临时录音
}; };
//进度条刷新是否启动 //进度条刷新是否启动
...@@ -48,23 +56,139 @@ $(function () { ...@@ -48,23 +56,139 @@ $(function () {
USERINFO = window.air.airClassInfo.user; USERINFO = window.air.airClassInfo.user;
ROLE = USERINFO.classRole; ROLE = USERINFO.classRole;
const playView = new PlayView(data); // 初始化 音频资源
initAudio(data);
playView.init(); // 初始化 图片资源
initImg(data);
if (aspect) { loadResources().then(() => {
recoverPage(aspect); const playView = new PlayView(data);
}
playView.init();
//初始化监听事件 if (aspect) {
initListener(); recoverPage(aspect);
}
//初始化监听事件
initListener();
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window.air.hideAirClassLoading(key, this.data);
});
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window.air.hideAirClassLoading(key, this.data);
}, key); }, 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 { class PlayView {
data; data;
...@@ -82,10 +206,8 @@ class PlayView { ...@@ -82,10 +206,8 @@ class PlayView {
this.initView(); this.initView();
} }
initDefaultData() { initDefaultData() {
if (!this.data) { if (!this.data) {
...@@ -96,6 +218,7 @@ class PlayView { ...@@ -96,6 +218,7 @@ class PlayView {
} }
initData() { initData() {
teaUserAspect.bindData = this.data; teaUserAspect.bindData = this.data;
} }
...@@ -162,7 +285,7 @@ class PlayView { ...@@ -162,7 +285,7 @@ class PlayView {
$("[role='stu']").show(); $("[role='stu']").show();
} }
} }
} }
...@@ -171,7 +294,7 @@ class PlayView { ...@@ -171,7 +294,7 @@ class PlayView {
* @param {*} aspect 断线恢复 * @param {*} aspect 断线恢复
*/ */
function recoverPage(aspect) { function recoverPage(aspect) {
if (ROLE == "tea") { if (ROLE == "tea") {
// 解析切面数据 // 解析切面数据
if (!aspect.user_aspect) { if (!aspect.user_aspect) {
...@@ -211,7 +334,7 @@ function recoverPage(aspect) { ...@@ -211,7 +334,7 @@ function recoverPage(aspect) {
if (stuUserAspect.isEnd) { if (stuUserAspect.isEnd) {
let score = stuUserAspect.recorderScoreObj; let score = stuUserAspect.recorderScoreObj;
drawResult(score.result, score.text); drawResult(score.result, score.text);
} }
else { else {
...@@ -225,40 +348,40 @@ function recoverPage(aspect) { ...@@ -225,40 +348,40 @@ function recoverPage(aspect) {
$("#curTime").append(getTimeStr(videoCurTime)); $("#curTime").append(getTimeStr(videoCurTime));
//已经录制 //已经录制
if(recorderArr.length > 0){ if (recorderArr.length > 0) {
let length = recorderArr.length; let length = recorderArr.length;
let last = recorderArr[length - 1];
let last = recorderArr[length - 1]; $("#submitBtn").show();
$("#submitBtn").show(); //如果没有删除最后一段,则显示删除按钮
if (stuUserAspect.isDelTemp) {
//重新绘画进度条
drawProgress($("#progressbar"), last.endTime);
}
else {
console.log("-----------")
console.log(last.endTime - last.startTime, teaAspect.totalTime)
//重新绘画进度条
drawProgress($("#tempProgressbar"), last.endTime - last.startTime, teaAspect.totalTime);
drawProgress($("#progressbar"), last.startTime - 0, teaAspect.totalTime);
//如果没有删除最后一段,则显示删除按钮 $("#backBtn").show();
if(stuUserAspect.isDelTemp){
//重新绘画进度条 if (!stuUserAspect.firstClickCancel) {
drawProgress($("#progressbar"), last.endTime); $(".back-tips").hide();
} }
else{ else {
console.log("-----------") $(".back-tips").show();
console.log(last.endTime - last.startTime, teaAspect.totalTime)
//重新绘画进度条
drawProgress($("#tempProgressbar"), last.endTime - last.startTime, teaAspect.totalTime);
drawProgress($("#progressbar"), last.startTime - 0, teaAspect.totalTime);
$("#backBtn").show();
if(!stuUserAspect.firstClickCancel){
$(".back-tips").hide();
}
else{
$(".back-tips").show();
}
} }
}
if(!stuUserAspect.firstClickRecorder){
$(".recorder-tips").hide(); if (!stuUserAspect.firstClickRecorder) {
} $(".recorder-tips").hide();
}
} }
const video = $("#video")[0]; const video = $("#video")[0];
if (video) { if (video) {
...@@ -314,6 +437,8 @@ function bindRecorderBtn() { ...@@ -314,6 +437,8 @@ function bindRecorderBtn() {
$(".recorder-play-icon").click(function () { $(".recorder-play-icon").click(function () {
playAudio('click', true);
if (stuUserAspect.firstClickRecorder) { if (stuUserAspect.firstClickRecorder) {
$(".recorder-tips").hide(); $(".recorder-tips").hide();
stuUserAspect.firstClickRecorder = false; stuUserAspect.firstClickRecorder = false;
...@@ -473,7 +598,7 @@ function bindSpeedBtn() { ...@@ -473,7 +598,7 @@ function bindSpeedBtn() {
} }
function setSpeed(speed) { function setSpeed(speed) {
$("#exercise").find(".speed-choice").removeClass('speed-active'); $("#exercise").find(".speed-choice").removeClass('speed-active');
$.each($("#exercise").find(".speed-choice"), function (i, item) { $.each($("#exercise").find(".speed-choice"), function (i, item) {
...@@ -496,6 +621,8 @@ function bindSentBtn() { ...@@ -496,6 +621,8 @@ function bindSentBtn() {
$(".sent-btn").click(function () { $(".sent-btn").click(function () {
playAudio('click', true);
//设置已经发题 //设置已经发题
teaUserAspect.isSendQuestion = true; teaUserAspect.isSendQuestion = true;
...@@ -529,6 +656,7 @@ function bindBackBtn() { ...@@ -529,6 +656,7 @@ function bindBackBtn() {
bindPressAnimation(backBtn); bindPressAnimation(backBtn);
backBtn.click(function () { backBtn.click(function () {
playAudio('click', true);
if (stuUserAspect.firstClickCancel) { if (stuUserAspect.firstClickCancel) {
$(".back-tips").hide(); $(".back-tips").hide();
stuUserAspect.firstClickCancel = false; stuUserAspect.firstClickCancel = false;
...@@ -548,7 +676,7 @@ function bindBackBtn() { ...@@ -548,7 +676,7 @@ function bindBackBtn() {
stuUserAspect.isDelTemp = true; stuUserAspect.isDelTemp = true;
} }
if(stuUserAspect.recorderArr.length == 0){ if (stuUserAspect.recorderArr.length == 0) {
$("#submitBtn").hide(); $("#submitBtn").hide();
} }
...@@ -566,6 +694,7 @@ function bindSubmitBtn() { ...@@ -566,6 +694,7 @@ function bindSubmitBtn() {
bindPressAnimation(submitBtn); bindPressAnimation(submitBtn);
submitBtn.click(function () { submitBtn.click(function () {
playAudio('submit', true);
$("#submitDialog").modal('show'); $("#submitDialog").modal('show');
}); });
} }
...@@ -599,13 +728,13 @@ function drawProgress(progressbar, duration, totalTime) { ...@@ -599,13 +728,13 @@ function drawProgress(progressbar, duration, totalTime) {
let tempTotalTime = totalTime; let tempTotalTime = totalTime;
//加载成功 //加载成功
if(video && video.readyState > 0 ){ if (video && video.readyState > 0) {
tempTotalTime = video.duration; tempTotalTime = video.duration;
} }
let progress = 0; let progress = 0;
if(tempTotalTime && tempTotalTime != 0){ if (tempTotalTime && tempTotalTime != 0) {
progress = Math.floor(duration / tempTotalTime * 100 * 100) / 100; progress = Math.floor(duration / tempTotalTime * 100 * 100) / 100;
} }
...@@ -618,9 +747,15 @@ function drawProgress(progressbar, duration, totalTime) { ...@@ -618,9 +747,15 @@ function drawProgress(progressbar, duration, totalTime) {
* 继续录制操作 * 继续录制操作
*/ */
function bindContinueBtnBtn() { function bindContinueBtnBtn() {
$('#submitDialog').on('shown.bs.modal', function (e) {
playAudio('fade', true);
})
const continueBtn = $("#continueBtn"); const continueBtn = $("#continueBtn");
bindPressAnimation(continueBtn, 'submit-press'); bindPressAnimation(continueBtn, 'submit-press');
continueBtn.click(function () { continueBtn.click(function () {
playAudio('click', true);
$("#submitDialog").modal('hide'); $("#submitDialog").modal('hide');
}) })
...@@ -633,6 +768,9 @@ function bindConfirmBtn() { ...@@ -633,6 +768,9 @@ function bindConfirmBtn() {
const confirmBtn = $("#confirmBtn"); const confirmBtn = $("#confirmBtn");
bindPressAnimation(confirmBtn, 'submit-press'); bindPressAnimation(confirmBtn, 'submit-press');
confirmBtn.on('click', function () { confirmBtn.on('click', function () {
playAudio('click', true);
$("#submitDialog").modal('hide'); $("#submitDialog").modal('hide');
$("#progressModal").modal('show'); $("#progressModal").modal('show');
...@@ -649,7 +787,7 @@ function bindConfirmBtn() { ...@@ -649,7 +787,7 @@ function bindConfirmBtn() {
cw.greadPapersForText(text, function (data) { cw.greadPapersForText(text, function (data) {
stuUserAspect.recorderScoreObj = { stuUserAspect.recorderScoreObj = {
result:data, result: data,
text: text text: text
}; };
stuUserAspect.isEnd = true; 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