Форум

maxvolodya · #1 (**permalink**) 08.02.2014, 02:42

Вопрос собственно вот в чем:

На странице 30 коротких аудио фалов. Которые должны вызываться нажатием на ячейки таблицы. Так как фалов много, писать к каждому вызов отдельной функции, не эстэтично) Знаю что можно как-то сообразить это с помощью конструктора и переменной в пути к файлу, но (мозг уже взорвал) не получается.
коды примерно такие:

.....
      <tr>
          <td onclick="PlayAlphabet(ka);">ка</td>
          <td onclick="PlayAlphabet(kha);">кха</td>
          <td onclick="PlayAlphabet(ga);">га</td> 
.....

Все аудио файлы имеют такие же имена, т.е ka.mp3, kha.mp3 и т.д.

Какой код дописать, чтобы проигрывался аудио файл с тем же именем, что и аргумент, используемый, когда вызывается функция?
типа:

function(имя) {
  audio = имя.mp3;
  audio.play();
}

Огромнейшее спасибо, если кто-то поможет!!

kostyanet · #2 (**permalink**) 08.02.2014, 09:16

Скорее всего вот так

http://www.w3schools.com/tags/ref_av_dom.asp

maxvolodya · #3 (**permalink**) 08.02.2014, 13:43

Наверное там есть ответ, но я не настолько хорошо знаком с JS, чтобы его найти.
пробовал так:

function Audio(name) {
      this.name = name;
      audio.src = this.name + ".mp3";
      audio.play();
    };

и так:

function Audio(name) {
      //this.name = name;
      new Audio(this.name + ".mp3").play();      
    };

всё при том, что в html вызов выглядит так:

<td onclick="Audio(ka);">

но, ничего не заводится

Товарищи подскажите, что изменить/добавить в коде JS..

cyber · #4 (**permalink**) 08.02.2014, 17:06

maxvolodya,
вот пример http://learn.javascript.ru/play/xCoCP

<!DOCTYPE HTML>
<html>
  <head>
    <style>
    
      table tr:hover
      {
        cursor: pointer;
        background-color: rgba(255,0,0,.3);
      }
      
    </style>
  
  </head>
  <body>
    
    <table id="music-list">
      <tr>
      <td data-src="http://cs9-10v4.vk.me/p12/e61136d2b40a9f.mp3?extra=idJNGELhQWCZ1k15kvGnbif0aY5rO7rWXgLMqvpWWKJvSiUajonMVR7F0nT8LWT47aoeLPQW0GNcOwMYKm1fuPIitsw-K6Q">
        <div>30 Seconds To Mars - This Is War</div>
      </td>
       </tr>
       <tr>
      <td data-src="http://cs9-8v4.vk.me/p24/bb968817be6960.mp3?extra=hskh5caZMrgPY5KCBbL38PQQ9GVpJZc5fpfaCPaxCLTvEX6l2fgyrgn8RMCWhUMpTOB33jlD81ZjBHEa3cfwf-0ulHqFnmU">
      Lana Del Rey - Video Games (Original)
      </td>
       </tr>
       <tr>
      <td data-src="http://cs536204.vk.me/u35133798/audios/2d5d9e0a126e.mp3?extra=TLxfUtQSuJKwrMd-RcWdWhqR9UnQpT_gdcbiJNX9lGyK9xdfP7qZ1SLsoiuZLjCsSjVpfMZyWYcnWF2RPESkcgNR2rt3tzU">
      Muse - Panic Station 
      </td>
      </tr>
    </table>

    <script>
      
      (function () {
      
        function  parent(fnc, endElem) {// лень было писать цикл проверки поэтому скопировал со своего кода реализцаю.
          if(typeof  fnc != "function")
              return this.parentElement;
      
          if(fnc.call(this, this))
              return this;
      
          var parent = this;
          while(parent = parent.parentElement) {
      
              if(endElem && parent == endElem)
                  return;
      
              if(fnc.call(this, parent))
                  return parent;
          }
      };
      
      
      var list = document.getElementById("music-list"), audio = audioCreate();
      
      list.addEventListener("click", function (e) {
        var src;
        
        var elem = parent.call(e.target, function (elem) {
          return elem.tagName == "TD" && (src = elem.getAttribute("data-src"));
        }, list);
        
        if(!elem) return;
        
        audio.src = src;
        audio.play();
        
      
      });
      
      function audioCreate() {
        
        audio = document.createElement('audio');
        audio.className = 'music';
        audio.setAttribute('controls','');
        audio.preload = 'metadata';
        audio.type = 'audio/mp3';
        audio.innerHTML = 'Вашим браузером не поддерживаеться вопспроизведение музыки.';
        return document.body.appendChild(audio);
      
      }
        
      }());




    </script>

  </body>
</html>

maxvolodya · #5 (**permalink**) 19.02.2014, 19:41

Спасибо! Это как раз то, что нужно. Уже прикрутил к своей странице, всё отлично. Сам бы я наверно долго до этого додумывался.

Форум

Справочник

Discord чат

Курсы javascript