Koran Rezitation mit verwandtem Vers hervorgehoben Skript

Question

Ich habe eine Anforderung, wo ich bestimmte Verse aus Quran (mp3) spielen muss und auf der anderen Seite markieren Sie den gleichen Vers im Koran. etwas ähnliches zu diesem http://www.quranexplorer.com/quran/.

Normalerweise brechen sie jedes Kapitel des Heiligen Quran in N Anzahl der Verse und spielen jeden Vers und markieren Sie das gleiche span oder div-Tag.

Heiliger Quran hat etwa 6236 Verse, was bedeutet, dass ich 6236 mp3-Dateien erstellen muss.

Gibt es eine Software oder ein Skript, die automatisches Skript erstellen können, oder was ist der beste Weg für die Lösung?

Lösung kann jquery basieren als Voraussetzung für die .net-Projekt ist

Answer 1

Sie müssen HTML audio DOM refrence verwenden, um diese Arbeit zu tun. Mit refrence können Sie Audio-Player verwalten und Audio abspielen. Sie können Audio wiedergeben, Audio anhalten, Audio laden und Ereignisse hinzufügen. Ich erstelle ein Beispiel unten. Wenn Sie auf die Schaltfläche klicken, beginnt der Spieler mit der Wiedergabe des ersten Sounds und markiert das erste Wort. Wenn der erste Ton endet, beginnt der Spieler mit dem nächsten Ton und markiert das nächste Wort.

var audioIndex = 0; 
 
var audioAddress = [ 
 
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9", 
 
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/9cd6976b1ce3b76", 
 
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/5d4ab0a4db5e7b4", 
 
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/0f5e54eda37e7f0", 
 
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/4597608ea80a312", 
 
    "http://audiomicro-dev.s3.amazonaws.com/preview/1030/6c4ae634173cc83" 
 
]; 
 

 
$("button").click(function(){ 
 
    audioIndex = 0; 
 
    playAudio(0); 
 
}); 
 

 
$("#myAudio")[0].onended = function() { 
 
    audioIndex += 1; 
 
    playAudio(audioIndex); 
 
}; 
 

 
function playAudio(index) 
 
{ 
 
    $("p > span").removeClass("playing"); 
 
    $("#myAudio")[0].src = audioAddress[index]; 
 
    $("#myAudio")[0].play(); 
 
    $("p > span:nth-child(" + (index + 1) + ")").addClass("playing"); 
 
}

#myAudio { 
 
    display: none; 
 
} 
 
span { 
 
    margin: 0px 10px; 
 
} 
 
.playing { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<audio id="myAudio"> 
 
    <source src="" type="audio/mpeg"> 
 
</audio> 
 
<button>Play Audio</button> 
 
<p> 
 
    <span>Rooster</span> 
 
    <span>Cat</span> 
 
    <span>Horse</span> 
 
    <span>Elephant</span> 
 
    <span>Vulture</span> 
 
    <span>Duck</span> 
 
</p>

play() starten Methode spielen, src Eigenschaft get Quelle von Audio-, gefeuert onended Ereignis, wenn Wiedergabeliste beendet.

Sie können HTML-Audio/Video-DOM refrence in this