Javascript 音頻點擊播放

Question

我有一個 JavaScript 代碼可以在點擊時播放聲音。 它適用於 Chrome，但在 Firefox 上它會在加載時啟動。

任何人都可以幫忙嗎？

<script>
var audio = new Audio("http://music.ogg");

audio.oncanplaythrough = function(){
audio.play();
}

audio.loop = true;

audio.onended = function(){
audio.play();
}

</script>

<input type="image" src="http://button.png" onclick="audio.play()">

Answer 1

試試下面的代碼片段

 <!doctype html> <html> <head> <title>Audio</title> </head> <body> <script> function play() { var audio = document.getElementById("audio"); audio.play(); } </script> <input type="button" value="PLAY" onclick="play()"> <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio> </body> </html>

Answer 2

JavaScript

function playAudio(url) {
  new Audio(url).play();
}

HTML

<img src="image.png" onclick="playAudio('mysound.mp3')">

大多數現代瀏覽器都支持，並且易於嵌入到 HTML 元素中。

Answer 3

那行得通

<audio src="${ song.url }" id="audio"></audio>
<i class="glyphicon glyphicon-play-circle b-play" id="play" onclick="play()"></i>

<script>
    function play() {
        var audio = document.getElementById('audio');
        if (audio.paused) {
            audio.play();
            $('#play').removeClass('glyphicon-play-circle')
            $('#play').addClass('glyphicon-pause')
        }else{
            audio.pause();
            audio.currentTime = 0
            $('#play').addClass('glyphicon-play-circle')
            $('#play').removeClass('glyphicon-pause')
        }
    }
</script>

Answer 4

現在Web Audio API已經出現並獲得瀏覽器支持，這可能是一個更強大的選擇。

Zounds是該 API 的原始包裝器，用於在使用時使用最少的樣板播放簡單的一次性聲音。

Answer 5

雖然有幾個答案是相似的，但我仍然有一個問題 - 用戶會多次點擊按鈕，播放音頻（要么是意外點擊，要么只是“播放”......）

一個簡單的修復：

var music = new Audio();
function playMusic(file) {
    music.pause();
    music = new Audio(file);
    music.play();
}

在加載時設置音頻允許在每次調用函數時暫停“音樂”——即使用戶多次單擊按鈕，也能有效地停止“噪音”（並且也無需關閉按鈕，但對於用戶體驗它可能是您想做的事情）。

Answer 6

HTML：

<button onclick="play()">Play File</button>
<audio id="audio" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>

JavaScript：

let play = function(){document.getElementById("audio").play()}

Answer 7

你可以在兩行中做到這一點

HTML

<button onclick="playSound()">Play</button>

JS

let playSound = () => new Audio("link").play()

Javascript 音頻點擊播放

問題描述

7 個解決方案

解決方案1
85 已采納 2013-09-16 11:13:36

解決方案2
15 2019-05-19 09:27:29

解決方案3
5 2016-11-07 18:01:43

解決方案4
2 2017-08-18 12:14:39

解決方案5
0 2020-05-04 21:56:35

解決方案6
0 2020-10-24 16:04:13

解決方案7
0 2021-09-14 12:01:20

Javascript 音頻點擊播放

問題描述

7 個解決方案

解決方案1 85 已采納 2013-09-16 11:13:36

解決方案2 15 2019-05-19 09:27:29

解決方案3 5 2016-11-07 18:01:43

解決方案4 2 2017-08-18 12:14:39

解決方案5 0 2020-05-04 21:56:35

解決方案6 0 2020-10-24 16:04:13

解決方案7 0 2021-09-14 12:01:20

解決方案1
85 已采納 2013-09-16 11:13:36

解決方案2
15 2019-05-19 09:27:29

解決方案3
5 2016-11-07 18:01:43

解決方案4
2 2017-08-18 12:14:39

解決方案5
0 2020-05-04 21:56:35

解決方案6
0 2020-10-24 16:04:13

解決方案7
0 2021-09-14 12:01:20