Javascript нажмите для воспроизведения музыки URL - PullRequest
Новая
       71

Javascript нажмите для воспроизведения музыки URL

0 голосов
/ 06 октября 2018

Мне нужен пример кода для щелчка для воспроизведения музыки. Я получаю все свои 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?

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

Вы можете использовать тег audio для воспроизведения звука, и если вы хотите приостановить один звук, если здесь воспроизводится другой аудиофайл, это простой код javascript

проверьте, какие элементы воспроизводятся сейчас, иpause звук, который воспроизводится в данный момент.

Подробнее о audio тег от MDN 

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>

Источник: несколько аудио html: автоматическая остановка, когда проигрывается ток с javascript

0 голосов
/ 06 октября 2018

Вы можете использовать тег embed для воспроизведения аудиофайлов

html 

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

javascript 

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