Question

我需要播放相关音频并突出显示相关文字，当用户再次点击播放按钮时，它应暂停然后从同一点开始播放

我有这个使用音频功能的脚本，但我不知道如何修改它以便它可以有暂停＆amp;播放功能

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>

Answer 1

试试这个

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

我添加了一个停止播放的按钮，你可以将两个底部合并为一个。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

播放音频＆amp;突出显示带暂停选项的文本

2 个答案: