Javascript点击播放音乐网址答案

【问题标题】：Javascript click to play music urlJavascript点击播放音乐网址
【发布时间】：2018-10-06 09:45:41
【问题描述】：

我需要点击播放音乐的示例代码我从系统文件夹中获取所有 mp3 文件，我想播放这些音乐。

我的代码是这样的

<a href="mp3folder/mp3name.mp3">mp3name</a>
<a href="mp3folder/mp3name1.mp3">mp3name1</a>
<a href="mp3folder/mp3name2.mp3">mp3name2</a>
<a href="mp3folder/mp3name3.mp3">mp3name3</a>

我应该如何使用JavaScript？

【问题讨论】：

Tried this?

标签： javascript html audio html5-audio audio-player

【解决方案1】：

你可以使用audio标签来播放音频，如果你想在播放另一个音频文件时暂停一个音频，这里是一个简单的javascript代码

检查当前正在播放的元素和pause 当前正在播放的音频。

从MDN阅读更多关于audio标签的信息

document.addEventListener('play', function(element){
    var audios = document.getElementsByTagName('audio');

    for(var i = 0, len = audios.length; i < len; i++){

        if(audios[i] != element.target){
            audios[i].pause();
        }
    }

}, true);

document.addEventListener('play', function(element){
    var audios = document.getElementsByTagName('audio');
    
    for(var i = 0, len = audios.length; i < len; i++){
        
        if(audios[i] != element.target){
         // console.log("audio paused");
            audios[i].pause();
        }
    }
  
}, true);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div>
      <a href="#" onclick="document.getElementById('p1').play()">Play 1</a>
      <a href="#" onclick="document.getElementById('p2').play()">Play 2</a>
      <a href="#" onclick="document.getElementById('p3').play()">Play 3</a>
      <a href="#" onclick="document.getElementById('p4').play()">Play 4</a>
    </div>
    <audio
           id="p1"
           src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio
           id="p2"
           
           src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio
           id="p3"
           
           src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio
           id="p4"
           
           src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio
           id="p5"
           
           src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
      Your browser does not support the <code>audio</code> element.
    </audio>

  

  </body>
</html>

来源：multiple audio html : auto stop other when current is playing with javascript

【讨论】：

如何替换音频控制来写mp3名称？
@RamazanAlkan 你问的是这个吗？
@RamazanAlkan 我很高兴！

【解决方案2】：

您可以使用embed标签播放音频文件

html

<embed src="mp3folder/mp3name.mp3" autostart="false" id="mp3name" enablejavascript="yes">

javascript

var mp3name = document.getElementById("mp3name");
mp3name.play();

【讨论】：

这对我来说还不够，我应该使用 php 来增加它，但我不能将 php 用于我的项目，只有 html 和 javascript
php 这个？为什么？