播放声音并更改播放图标以停止点击图标

时间:2015-11-12 03:08:09

标签: javascript jquery html css

当我点击下面有代码但按钮不起作用的按钮时,我试图播放声音。

我还希望在播放声音时播放图标会停止播放。

但它不起作用,你看到问题出在哪里了吗?

http://jsfiddle.net/804jeg82/351/

jQuery的:

.alphabetNav li {
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

1 个答案:

答案 0 :(得分:1)

您忘记了audio元素。顺便说一句,id必须在你的html中是唯一的。

根据w3school

  

id属性指定HTML元素的唯一ID(值   在HTML文档中必须是唯一的。)

var playBtn = document.getElementById('play');
var audio = document.getElementById('audio');
var stopbtn = document.getElementById('stop');

var playSound = function () {
    audio.play();
};

var stopSound = function () {
    audio.pause();
    audio.currentTime = 0;
};


playBtn.addEventListener('click', playSound, false);

stopbtn.addEventListener('click', stopSound, false);

Jsfiddle



var playBtn = document.getElementById('play');
var audio = document.getElementById('audio');
var stopbtn = document.getElementById('stop');

var playSound = function () {
    audio.play();
};

var stopSound = function () {
    audio.pause();
    audio.currentTime = 0;
};


playBtn.addEventListener('click', playSound, false);

stopbtn.addEventListener('click', stopSound, false);

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sounds"> <a href="#" class="btn">
      Mountain 1
      <audio id="audio" src="http://download.wavetlan.com/SVV/Media/HTTP/MP3/Nero_SmartTrax/NeroSmartTrax_test4_MPEG2_Mono_CBR_40kbps_24000Hz.mp3" preload="auto" ></audio>    
    
   </a>

    <br> <i id="play" class="fa fa-play"></i>

    <br> <i id="stop" class="fa fa-stop"></i>

</div>
&#13;
&#13;
&#13;