播放音頻和高亮文本與暫停選項

我需要發揮相關的音頻，並突出顯示相關的文本，當用戶點擊播放按鈕，它再次暫停，然後從相同點開始播放播放音頻和高亮文本與暫停選項

我有這個腳本，它使用音頻功能，但我不知道如何修改它，這樣它可以有停頓&玩遊戲功能

http://jsbin.com/juwoyidome/edit?html,output

<html><head> 
    <style> 
     #myAudio { 
    display: none; 
} 
span { 
    margin: 0px 10px; 
} 
.playing { 
    background: yellow; 
} 
    </style> 
</head> 

<body> 

<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> 
    <script type="text/javascript"> 
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"); 
} 
    </script> 

</body></html>

來源

2016-06-08 Learning

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" 
 
]; 
 

 
var playing = false; 
 

 
$(function() { 
 

 
    $aud = $("#myAudio")[0]; 
 
    $btn = $("button"); 
 

 
    function setAudio(index) { 
 
    $("p > span").removeClass("playing"); 
 
    $aud.src = audioAddress[index]; 
 
    } 
 

 
    setAudio(audioIndex); 
 

 
    $btn.click(function() { 
 
    if (playing) { 
 
     playing = false; 
 
     $aud.pause(); 
 
    } else 
 
     $aud.play(); 
 
    }); 
 

 
    $aud.onended = function() { 
 
    if (audioIndex < audioAddress.length - 1) { 
 
     audioIndex++; 
 
     setAudio(audioIndex); 
 
     $aud.play(); 
 
    } else { 
 
     audioIndex = 0; 
 
     setAudio(audioIndex); 
 
     playing = false; 
 
     $btn.text("Play Audio"); 
 
    } 
 
    }; 
 

 
    $aud.onpause = function() { 
 
    if (!playing) $btn.text("Play Audio"); 
 
    }; 
 

 
    $aud.onplay = function() { 
 
    $btn.text("Pause Audio"); 
 
    playing = true; 
 
    $("p > span:nth-child(" + (audioIndex + 1) + ")").addClass("playing"); 
 
    }; 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/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>

來源

2016-06-08 09:12:48 Midas

這是可以正常使用。謝謝。我試圖使用不正常工作的切換。 – Learning

試試這個

<html><head> 
    <style> 
     #myAudio { 
    display: none; 
} 
span { 
    margin: 0px 10px; 
} 
.playing { 
    background: yellow; 
} 
    </style> 
</head> 

<body> 

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<audio controls id="myAudio"> 
    <source src="" type="audio/mpeg"> 
</audio> 
<button class="play">Play Audio</button> 
    <button class="stop">Stop Audio</button> 
<p> 
    <span>Rooster</span> 
    <span>Cat</span> 
    <span>Horse</span> 
    <span>Elephant</span> 
    <span>Vulture</span> 
    <span>Duck</span> 
</p> 
    <script type="text/javascript"> 
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.play").click(function(){  
     if (audioIndex == 6) audioIndex = 0;  
     playAudio(audioIndex); 
     $("button.play").addClass('stop'); 
     $("button.play").removeClass('play'); 

}); 

$("button.stop").click(function(){ 
    $("#myAudio")[0].pause(); 
}); 

$("#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"); 
} 
    </script> 

</body></html>

我已經添加了一個按鈕來停止播放，您可以合併兩個botton中只有一個。

來源

2016-06-08 08:55:13

這是工作我試圖用一個按鈕做同樣的 – Learning

嘗試這種解決方案http://jsbin.com/dudukoxoru/1/edit?html,output –

播放音頻和高亮文本與暫停選項

回答

相關問題