Question

我有一个要求，我必须从古兰经（mp3）播放特定的经文，另一方面突出实际古兰经中相同的经文。与此http://www.quranexplorer.com/quran/类似的东西。

他们通常将“古兰经”的每一章打破N个经文，然后播放每节经文并突出显示相同的跨度或div标签。

古兰经有大约6236节经文，这意味着我需要制作6236个mp3文件。

是否有任何软件或脚本可以创建自动脚本或解决方案的最佳方式。

解决方案可以基于jquery，因为要求是.net项目

Answer 1

您需要使用HTML audio DOM refrence来完成这项工作。使用HTML DOM参考，您可以管理音频播放器和播放音频。您可以播放音频，停止音频，加载音频和添加事件。我在底部创建示例。当您点击按钮时，播放器开始播放第一个声音并突出显示第一个单词。当第一个声音结束时，播放器开始播放下一个声音并突出显示下一个声音。

＆＃13;

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");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

play()方法开始播放，src属性获取音频源，播放列表结束时触发onended事件。

您可以在 this

中看到HTML音频/视频DOM参考

古兰经背诵与相关经文突出显示脚本

1 个答案: