Каскадный режим | Линейный режим

yumakar · 10.08.2013 13:58:24

Я нашёл команды управления звуком через JavaScript.

Код:

<!DOCTYPE html>

<html>

  <head>

    <title>HTML5 Audio Player </title>    

    <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    

    <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->  

    <script type="text/javascript">

        // Global variable to track current file name.

        var currentFile = "";

        function playAudio() {

            // Check for audio element support.

            if (window.HTMLAudioElement) {

                try {

                    var oAudio = document.getElementById('myaudio');

                    var btn = document.getElementById('play'); 

                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.

                    if (audioURL.value !== currentFile) {

                        oAudio.src = audioURL.value;

                        currentFile = audioURL.value;                       

                    }

                    // Tests the paused attribute and set state. 

                    if (oAudio.paused) {

                        oAudio.play();

                        btn.textContent = "Pause";

                    }

                    else {

                        oAudio.pause();

                        btn.textContent = "Play";

                    }

                }

                catch (e) {

                    // Fail silently but show in F12 developer tools console

                     if(window.console && console.error("Error:" + e));

                }

            }

        }

             // Rewinds the audio file by 30 seconds.

        function rewindAudio() {

             // Check for audio element support.

            if (window.HTMLAudioElement) {

                try {

                    var oAudio = document.getElementById('myaudio');

                    oAudio.currentTime -= 30.0;

                }

                catch (e) {

                    // Fail silently but show in F12 developer tools console

                     if(window.console && console.error("Error:" + e));

                }

            }

        }

             // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

             // Check for audio element support.

            if (window.HTMLAudioElement) {

                try {

                    var oAudio = document.getElementById('myaudio');

                    oAudio.currentTime += 30.0;

                }

                catch (e) {

                    // Fail silently but show in F12 developer tools console

                     if(window.console && console.error("Error:" + e));

                }

            }

        }

             // Restart the audio file to the beginning.

        function restartAudio() {

             // Check for audio element support.

            if (window.HTMLAudioElement) {

                try {

                    var oAudio = document.getElementById('myaudio');

                    oAudio.currentTime = 0;

                }

                catch (e) {

                    // Fail silently but show in F12 developer tools console

                     if(window.console && console.error("Error:" + e));

               }

            }

        }

    </script>

  </head>

  <body>

    <p>

      <input type="text" id="audiofile" size="80" value="demo.mp3" />

    </p>

    <audio id="myaudio">

      HTML5 audio not supported

    </audio>

    <button id="play" onclick="playAudio();">

      Play

    </button>

    <button onclick="rewindAudio();">

      Rewind

    </button>

    <button onclick="forwardAudio();">

      Fast forward

    </button>

    <button onclick="restartAudio();">

      Restart

    </button>

  </body>

</html>

В моём случае будет всего один файл demo.mp3 и три моих кнопки: stop.png, play.png и forward.png. Надо разделить функцию Play/Pause и повесить только Play на play.png, добавить функцию полного останова на stop.png, Fast Forward можно оставить и назначить на forward.png. И ещё нужно убрать окно Input, где показывается имя файла, и все формы кнопок в верхнем примере (останутся только три моих кнопки). Заранее спасибо.

yumakar · 18.08.2013 15:15:07

Уважаемые админы, просьба завершить тему. Какой атрибут вместо href (см. document.getElementById('text_songs').setAttribute('href',songs[current]); ) нужно задать в коде страницы, чтобы вместо ссылки на mp3 файл вызвать функцию:
function Play() {
var audioElm = document.getElementById("text_songs");
document.getElementById("img1"); // Кнопка Play
audioElm.play('text_songs'); }

Код:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Плеер</title>

<script type="text/javascript">

 var songs=new Array("demo1.mp3","demo2.mp3","demo3.mp3");

 var all_text=new Array("text_1","text_2","text_3");

 var current=0;

 function change(direction) {

 current+=direction;

 if (current>all_text.length-1) current=0;

 if (current<0) current=all_text.length-1;

 document.getElementById('text_songs').setAttribute('href',songs[current]);

 if (document.layers) {

    document.layers.text.document.write(all_text[current]);

    document.layers.text.document.close();

   }

   else text.innerHTML=all_text[current];

 }

 </script>

 </head>

 <body>

 <table border="1" width="20%" cellspacing="0" cellpadding="0">

 <tr>

   <td>

     <span id="text">text_1<span>

   </td>

 </tr>

 </table>

 <a href="#" onclick="change(-1);">Назад</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 <a href="demo1.mp3" id="text_songs">Перейти</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 <a href="#" onclick="change(1);">Вперёд</a>

 </body>

</html>

***Admin*** · 18.08.2013 15:52:22

Для вызова функции Play из javascript кода достаточно просто написать Play();
Если Вам необходимо вызвать функцию по клику по какому-либо HTML элементу, то добавьте внутрь элемента onclick="Play();". Например, <a href="demo1.mp3" id="text_songs" onclick="Play();">Перейти</a>

yumakar · 18.08.2013 16:48:42

Проигрываться должен только тот файл, название которого видно в таблице. Он выбирается надписями "Назад" и "Вперёд".

Каскадный режим \| Линейный режим Смена надписей и ссылок к ним
Автор	Сообщение