Как воспроизводить звук с помощью кнопок HTML

Question

Мой текущий способ воспроизведения музыки через мой сайт осуществляется с помощью аудио-тегов HTML. Однако я хочу, чтобы иметь возможность воспроизводить его с помощью кнопки HTML. Эта кнопка должна иметь возможность переключать музыку между воспроизведением и остановкой. Я создал пример JSFiddle, но не знаю, как его реализовать. Может кто-нибудь, пожалуйста, покажите мне, как это сделать, используя мой пример JSFiddle?

JSFiddle:http://jsfiddle.net/jTh3v/332/

Оригинальный способ я сделал это:

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>"; 

Answer 1

попробовать, как этот

 

    $('#button_play').on('click', function() { 
     $('#button_pause').show(); 
     $('#button_play').hide(); 
     $('audio')[0].play(); 
    }); 
    $('#button_pause').on('click', function() { 
     $('#button_play').show(); 
     $('#button_pause').hide(); 
     $('audio')[0].pause(); 
    }); 

Идея заключается в том, чтобы взять аудио элемент из массив, который возвращает и использует методы для тега HTML5. Все методы, которые вы можете найти в here

Answer 2

Это будет работать:

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>"; 
 

 
$('#button_play').on('click', function() { 
 
\t //I added this 
 
\t $("audio")[0].play(); 
 
    
 
    $('#button_pause').show(); 
 
    $('#button_play').hide(); 
 
}); 
 
$('#button_pause').on('click', function() { 
 
\t //I added this 
 
\t $("audio")[0].pause(); 
 
    
 
    $('#button_play').show(); 
 
    $('#button_pause').hide(); 
 
});

.second { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br> 
 

 
    <p>HTML Audio tag method (the method I don't want):</p> 
 
    <div id="soundTag"></div><br> 
 

 
    <p>Button method (the method I want, but doesn't work):</p> 
 
    <div> 
 
    <button id="button_play" class="first" type="button"> 
 
     <i class="glyphicon glyphicon-volume-up"></i></button> 
 
    <button id="button_pause" class="second" type="button"> 
 
     <i class="glyphicon glyphicon-volume-off"></i></button> 
 
    </div>

Answer 3

вы можете играть звук OnClick событие ... вставить кнопку на html.write функции и вызова это на вашей кнопке как событие onclick.

function playMusic(){ 
 
    var music = new Audio('musicfile.mp3'); 
 
    music.play(); 
 
    }

<input type="button" value="sound" onclick="playMusic()" />

Убедитесь, чтобы дать корректное имя файла.