HTML 5音频自定义控件

问题描述 投票:0回答:1

似乎控件的暂停属性始终为true。我想要一个按钮来播放/暂停。它将播放音频,但不会暂停点击事件。

我想在第一次点击时播放按钮,然后在我再次点击时暂停。由于音频控制需要使用数据歌曲值来提供音频控制源,因此会有许多音轨。任何时候我编码检查数据歌曲它不会暂停。

    <!DOCTYPE html>
    <head>
    <title>Test</title>

    <script>

function playAudio()
{

var audio = document.getElementById('player');
var playbutton = document.getElementById('play');
var url = playbutton.getAttribute('data-song');

player.src = url;

if(audio.paused){


    audio.play();
    }
    else
    {
    audio.pause();
    }


}

</script>
</head>


<body>



<p id="play" onClick="playAudio()" data-song="rock.mp3" >play</p>






<audio controls id="player">
  <source src="" type="audio/ogg">
  <source src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>



</body>

</html>
javascript audio mp3
1个回答
0
投票

每次调用函数时,它都会再次设置音频源,其默认状态为“暂停”。将source属性放在音频标记中,如下所示:

 <!DOCTYPE html>
<head>  
<title>Test</title>
<script>
function playPause()
{

 var audio = document.getElementById('player')
 var playbutton = document.getElementById('play')
 audio.controls = false

if(audio.paused){

  audio.play()
  playbutton.innerHTML = "stop"

}
else
{
  audio.pause()
  playbutton.innerHTML = "play"
}  
}
</script>
</head>
<body>
<p id="play" onClick="playPause()" >play</p>
<audio id="player" src="lala.mp3"></audio>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.