Question

我目前通过网站播放音乐的方法是使用HTML音频标签。但是我希望能够通过HTML按钮来播放它。此按钮应该能够在播放和停止之间切换音乐。我在JSFiddle上创建了一个例子，但不知道如何实现它。有人可以告诉我如何使用我的JSFiddle示例吗？

JSFiddle： http://jsfiddle.net/jTh3v/332/

我这样做的原创方式：

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

Answer 1

你可以通过onclick事件播放声音...在html上插入一个按钮。编写一个函数并在你的按钮上调用它作为onclick事件。

＆＃13;

<input type="button" value="sound" onclick="playMusic()" />

＆＃13;

<cxf:cxfEndpoint id="cxfEndpnt" address="http://localhost:8088/mockDownloadService"
    wsdlURL="D:\workspaces\sdpwrk\vaibhav-test\src\main\resources\META-INF\downloadService\DownloadServices.wsdl">
    <cxf:properties>
        <entry key="dataFormat" value="PAYLOAD" />
    </cxf:properties>
</cxf:cxfEndpoint>

<camelContext id="dest_context" xmlns="http://camel.apache.org/schema/spring"
    handleFault="true">

    <interceptSendToEndpoint uri="cxfEndpnt"
        skipSendToOriginalEndpoint="false">
        <camel:bean ref="testBean" method="testMethod"></camel:bean>
    </interceptSendToEndpoint>

    <route>
        <from uri="direct:testInterceptor" />

        <!-- Able to intercept -->
        <to uri="cxfEndpnt"/>
         <!-- Not Able to intercept -->
        <to ref="cxfEndpnt"/>

    </route>

＆＃13;

确保提供有效的文件名。

Answer 2

尝试这样


    $('#button_play').on('click', function() {
      $('#button_pause').show();
      $('#button_play').hide();
      $('audio')[0].play();
    });
    $('#button_pause').on('click', function() {
      $('#button_play').show();
      $('#button_pause').hide();
      $('audio')[0].pause();
    });

这里的想法是从返回的数组中获取audio元素并使用HTML5标记的方法。您可以从here

找到所有方法

Answer 3

这将有效：

＆＃13;

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

$('#button_play').on('click', function() {
	//I added this
	$("audio")[0].play();
  
  $('#button_pause').show();
  $('#button_play').hide();
});
$('#button_pause').on('click', function() {
	//I added this
	$("audio")[0].pause();
  
  $('#button_play').show();
  $('#button_pause').hide();
});

＆＃13;

.second {
  display: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br>

  <p>HTML Audio tag method (the method I don't want):</p>
  <div id="soundTag"></div><br>

  <p>Button method (the method I want, but doesn't work):</p>
  <div>
    <button id="button_play" class="first" type="button">
      <i class="glyphicon glyphicon-volume-up"></i></button>
    <button id="button_pause" class="second" type="button">
      <i class="glyphicon glyphicon-volume-off"></i></button>
  </div>

＆＃13;

Answer 4

这有效。删除我的mp3文件，然后上传自己的mp3文件。

<button id="ASong" onClick="playPause()">
  <audio
    src="file_example_MP3_700KB.mp3"
    autoplay
    loop
  ></audio>
  Song
</button>

<script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>

Answer 5

播放和暂停按钮。

信息和代码来自https://www.w3schools.com/jsref/met_audio_play.asp

我把它放在这个http://jsfiddle.net/654qasw0/（改变声源）上

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
  <source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>

</body>
</html>

Answer 6

尝试一下：

int16_t

或：

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
  <source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>

</body>
</html>

如果它们不起作用，请尝试以下操作：

<button id="ASong" onClick="playPause()">
  <audio
    src="file_example_MP3_700KB.mp3"
    autoplay
    loop
  ></audio>
  Song
</button>

<script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script>

如何通过HTML按钮播放声音

6 个答案: