单击链接后如何在后台播放音频文件？ （没有嵌入）

Question

目前我在点击链接后使用以下代码播放一些音频：

void pushItem(const int& ref)
{
    std::lock_guard<std::mutex> lock(g_mutex);
    cout << "I am locking" << endl;

    g_vector.push_back(ref);
}

现在，如果用户点击该链接，则会加载带有音频播放面板的新页面。播放音频后，用户必须单击浏览器的<a href="http://somehost.com/word_audio.ogg">Pronunciation of a word</a> 按钮才能返回原始内容。

是否可以在不指向新页面的情况下播放音频？当用户点击链接时，音频只在后台播放？  （不要使用嵌入，因为它只是一个单词的发音的1秒音频，作为一个不常见的单词的次要解释）。

Answer 1

实际上href属性会将您重定向到新页面，您可以在链接e.prevenDefault()事件处理程序中使用click来停止此重定向并创建动态audio将此href作为来源并播放的元素。

这就是你需要的：

＆＃13;

＆＃13;

function playItHere(e, link) {
  var audio = document.createElement("audio");
  var src = document.createElement("source");
  src.src = link.href;
  audio.appendChild(src);
  audio.play();
  e.preventDefault();
}

＆＃13;

<a href="https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" onclick="playItHere(event, this)">Pronunciation of a word</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在html5中，您实际上可以使用<audio>标记来完成这项工作！

<audio src="/music/myaudio.ogg" autoplay> Sorry, your browser does not support the <audio> element. </audio>

消息来源：Wired

Answer 3

如果使用标签，请小心使用href。 代码片段已修复。   首先，您需要将convert ogg转换为mp3，而不是将其用于多源。

小型浏览器探测器（ chrome / opera / safari - mp3和 mozilla - ogg。）

E("PLAYER").addEventListener("error", function(e) { 
      
   console.log("error: " + e.target.error)
       
});

function PLAYER_BACKGROUND(what) {
 
 var SOURCE_PATH = E(what).getAttribute("whattoplay")
 
   if (isChrome == true)
   {
 
      SOURCE_PATH = SOURCE_PATH.replace(".ogg" , ".mp3")
      
   }
   else {
   
      SOURCE_PATH = SOURCE_PATH.replace( ".mp3" , ".ogg" )
      
   }
 
  E("PLAYER").src = SOURCE_PATH 
  E("PLAYER").play() 
    
 }

<script>

var E = function(id){return document.getElementById(id)};
var isChrome = /Chrome/.test(navigator.userAgent) || /Safari/.test(navigator.userAgent);

</script>

<a id="audio_1" onclick="PLAYER_BACKGROUND(this.id)" whattoplay="https://maximumroulette.com/framework/res/audio/laser7.ogg" href="javascript:void(0)">Pronunciation of a word</a>

<audio style="display:none" id="PLAYER" autoplay controls>

 <source src="#" type="audio/ogg">
 <source src="#" type="audio/mpeg">
Sorry, your browser does not support the  element. 

</audio>