超鏈接文本到mp3而不顯示播放器

如何在不顯示播放器的情況下創建文本超鏈接到mp3文件。例如，如果我在我的網站上有「播放」一詞並點擊了它，則相關聯的mp3將播放而不離開該網頁並且沒有可見的播放器。另外，當右鍵單擊時，該人員可以選擇保存/下載文件。我找到的最接近的例子只允許您複製鏈接位置，而不是下載/保存mp3文件。謝謝。超鏈接文本到mp3而不顯示播放器

<!--[ In the head section of the HTML ]--> 

<!--audio--> 
<script type="text/javascript"> 
function play_single_sound() { 
document.getElementById('audiotag').play(); 
} 
</script> 
<!--/audio--> 

<!--[ In the body section of the HTML ]--> 

<!--embedded audio--> 
<div id="audio"> 
<audio id="audiotag" src="http://sample.mp3" autobuffer="autobuffer"></audio> 
</div> 
<!--/embedded audio--> 

<!--button/link--> 
<a href="javascript:play_single_sound();">play</a> 
<!--/button/link--> 

<!--[ Optional CSS ]--> 
div#audio { 
display: none; 
overflow: hidden; 
}

來源

2014-02-28 user3080392

加載一個iFrame的寬度內的MP3：0和高度：0 – esdebon

使<a>標記指向mp3文件。當你左鍵點擊時，使用JavaScript來播放它。當你點擊鼠標右鍵時，你會看到內置的菜單和一個「保存鏈接」選項。

<a href="http://sample.mp3" id="audiolink">play</a>

然後，在JavaScript，你也能抑制連接的默認操作：

<script type="text/javascript"> 
document.getElementById('audiolink').addEventListener('click', function(e){ 
    e.preventDefault(); 
    document.getElementById('audiotag').play(); 
}); 
</script>

來源

2014-02-28 23:17:39

這真是棒極了！謝謝，我很感激。 – user3080392

不客氣！很高興我能幫助:-) –

的最好的辦法是使用類似SoundManager。對於不支持html5音頻標籤的瀏覽器，它具有閃回回退功能。

演示普通的mp3的一趟花俏鏈接：play-mp3-links

來源

2014-02-28 23:22:30 bitWorking

感謝您的領導。我會研究它。我剛剛標記爲答案的迴應對我來說效果很好。 – user3080392

@ user3080392但請記住，接受的答案在所有瀏覽器中都不起作用，並且如果您有多個mp3鏈接。我建議看看soundmanager。 – bitWorking

是的，你是對的。我嘗試了一些鏈接，但效果不佳。我還將嘗試soundmanager。謝謝 – user3080392

超鏈接文本到mp3而不顯示播放器

回答

相關問題