#250 moving audio js code to Index.cshtml

This commit is contained in:
Hamid Reza Mohammadi 2021-11-29 21:11:36 +03:30
parent 95a659c8bd
commit 70f9bcaa18
2 changed files with 61 additions and 57 deletions

View File

@ -82,6 +82,58 @@
{
if (Model.GanjoorPage != null && Model.GanjoorPage.Poem.Recitations.Length > 0)
{
<script>
var currentAudio = null;
var verseStart = [];
var verseEnd = [];
var verseIndex = [];
var nLastHighlight = -1;
var vCount = 0;
var _setXml = function (xmlUrl) {
$.ajax({
type: "GET",
url: xmlUrl,
dataType: "xml",
success: function (xml) {
var nOneSecondBugFix = 2000;
$(xml).find('OneSecondBugFix').each(function () {
nOneSecondBugFix = parseInt($(xml).find('OneSecondBugFix').text());
});
var v = 0;
$(xml).find('SyncInfo').each(function () {
verseStart[v] = parseInt($(this).find('AudioMiliseconds').text()) / nOneSecondBugFix;
verseIndex[v] = parseInt($(this).find('VerseOrder').text());
if (v > 0)
verseEnd[v - 1] = verseStart[v];
v++;
});
v--;
if (v > 1)
verseEnd[v] = verseStart[v] + 2 * (verseEnd[v - 1] - verseStart[v - 1]);
vCount = v;
}
});
}
var _trackTimeChanged = function (audio) {
var currentTime = audio.currentTime;
if (currentTime > 0) {
for (var i = 0; i <= vCount; i++) {
if (currentTime >= verseStart[i] && currentTime <= verseEnd[i]) {
hilightverse(verseIndex[i], "red", true, playerScrollLock);
if (nLastHighlight != verseIndex[i] && nLastHighlight != -1)
hilightverse(nLastHighlight, "black", false, false);
nLastHighlight = verseIndex[i];
break;
}
}
}
};
</script>
<script src="/dist/jplayer/jquery.jplayer.min.js"></script>
<script src="/dist/add-on/jplayer.playlist.min.js"></script>
<script>
@ -98,13 +150,13 @@
@for (int x = 1; x < Model.GanjoorPage.Poem.Recitations.Length; x++)
{
<text>
addpaudio(@x, jlist,
"@Html.Raw($"{GanjooRazor.APIRoot.InternetUrl}/api/audio/file/{Model.GanjoorPage.Poem.Recitations[x].Id}.xml")",
"@Html.Raw(Model.GanjoorPage.Poem.Recitations[x].AudioTitle)",
"@Html.Raw(Model.getAudioDesc(Model.GanjoorPage.Poem.Recitations[x], false))",
"",
"@Html.Raw(Model.GanjoorPage.Poem.Recitations[x].Mp3Url)"
);
addpaudio(@x, jlist,
"@Html.Raw($"{GanjooRazor.APIRoot.InternetUrl}/api/audio/file/{Model.GanjoorPage.Poem.Recitations[x].Id}.xml")",
"@Html.Raw(Model.GanjoorPage.Poem.Recitations[x].AudioTitle)",
"@Html.Raw(Model.getAudioDesc(Model.GanjoorPage.Poem.Recitations[x], false))",
"",
"@Html.Raw(Model.GanjoorPage.Poem.Recitations[x].Mp3Url)"
);
</text>
}

View File

@ -2,56 +2,7 @@
@using DNTPersianUtils.Core
@{
}
<script>
var verseStart = [];
var verseEnd = [];
var verseIndex = [];
var nLastHighlight = -1;
var vCount = 0;
var _setXml = function (xmlUrl) {
$.ajax({
type: "GET",
url: xmlUrl,
dataType: "xml",
success: function (xml) {
var nOneSecondBugFix = 2000;
$(xml).find('OneSecondBugFix').each(function () {
nOneSecondBugFix = parseInt($(xml).find('OneSecondBugFix').text());
});
var v = 0;
$(xml).find('SyncInfo').each(function () {
verseStart[v] = parseInt($(this).find('AudioMiliseconds').text()) / nOneSecondBugFix;
verseIndex[v] = parseInt($(this).find('VerseOrder').text());
if (v > 0)
verseEnd[v - 1] = verseStart[v];
v++;
});
v--;
if (v > 1)
verseEnd[v] = verseStart[v] + 2 * (verseEnd[v - 1] - verseStart[v - 1]);
vCount = v;
}
});
}
var _trackTimeChanged = function (audio) {
var currentTime = audio.currentTime;
if (currentTime > 0) {
for (var i = 0; i <= vCount; i++) {
if (currentTime >= verseStart[i] && currentTime <= verseEnd[i]) {
hilightverse(verseIndex[i], "red", true, playerScrollLock);
if (nLastHighlight != verseIndex[i] && nLastHighlight != -1)
hilightverse(nLastHighlight, "black", false, false);
nLastHighlight = verseIndex[i];
break;
}
}
}
};
</script>
<div class="container">
@for (var nRecitationIndex = 0; nRecitationIndex < Model.Recitations.Length; nRecitationIndex++)
@ -67,9 +18,10 @@
</div>
<script>
document.getElementById('audio-@(nRecitationIndex + 1)').addEventListener('play', () => {
currentAudio = document.getElementById('audio-@(nRecitationIndex + 1)');
var audioList = document.querySelectorAll('audio');
audioList.forEach(function(audioElement) {
if(audioElement != document.getElementById('audio-@(nRecitationIndex + 1)')){
if(audioElement != currentAudio){
audioElement.pause();
}
});