Comment lire le son via les boutons HTML

Question

Ma méthode actuelle de lecture de musique via mon site Web est la suivante: les balises audio HTML. Cependant, je veux être en mesure de jouer à travers le bouton HTML à la place. Ce bouton devrait être capable de faire basculer la musique entre la lecture et l'arrêt. J'ai créé un exemple sur JSFiddle mais je ne sais pas comment l'implémenter. Quelqu'un pourrait-il me montrer comment le faire en utilisant mon exemple JSFiddle?

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

façon originale je l'ai fait:

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

Answer 1

essayer comme ça

 

    $('#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(); 
    }); 

L'idée est de prendre l'élément audio ici de la tableau qui renvoie et utilise les méthodes pour le tag HTML5. Toutes les méthodes que vous pouvez trouver de here

Answer 2

Cela fonctionne:

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

vous pouvez jouer un son par événement onclick ... insérer un bouton sur html.write une fonction et appel à votre bouton en tant qu'événement onclick.

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

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

Assurez-vous de donner un nom de fichier valide.