getting audio element to play after a pause not working in jquery -

-

i trying audio element able played , paused many times user hits button. far can audio play after first push turns icon pause. if user clicks again pause audio , turn icon play button. after cannot work anymore.

html

<a href="'.$row['audio'].'" target="_blank"><i class="fa fa-cloud-download"></i></a> <a href="#" class="fa fa-play button-play"><audio src="'.$row['audio'].'" id="mytune1" class="mytune1" preload="none"></audio></a>

jquery

$(document).on("click", ".button-play", function() {      var audioelement = $(this).find('.mytune1')[0];     $(this).blur();     $(this).addclass("active");     $(this).removeclass("active");     $(this).replacewith('<a href="#" class="fa fa-pause button-pause"><audio src="'+audioelement+'" id="mytune1" class="mytune1" preload="none"></audio></a>');     audioelement.play();     thisaudioelement = audioelement; }); $(document).on("click", ".button-pause", function() {      var audioelement = $(this).find('.mytune1')[0];     $(this).blur();     $(this).addclass("active");     $(this).removeclass("active");     $(this).replacewith('<a href="#" class="fa fa-play button-play"><audio src="'+audioelement+'" id="mytune1" class="mytune1" preload="none"></audio></a>');     thisaudioelement.pause(); });

audioelement is object, still need retrieve it's src property value it:

....src="'+ audioelement.src +'" id="mytune1"...

also there's no absolute need stuff like

$(this).addclass("active");    // ok.... added but... $(this).removeclass("active"); // what's

ok, how than?

believe or not code you'll possibly need:

$(document).on("click", ".button-play", function( evt ) {    evt.preventdefault(); // prevents page scroll top (since you're using <a> anchor)    var audio = $(this).find('audio')[0];    audio[audio.paused?"play":"pause"]();    $(this).toggleclass("fa-pause");      // toggle pause icon  });
.button-play{    display:inline-block;    padding:8px 10px;    line-height:38px;    text-align:center;    text-decoration:none;    color:#fff;    background: lime;    box-shadow: 0 1px 3px rgba(0,0,0,0.3);    border-radius: 50%;  }  .button-play.fa-pause{    background: tomato;  }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <a href="#" class="fa fa-play button-play">    <audio loop src="http://upload.wikimedia.org/wikipedia/en/4/45/acdc_-_back_in_black-sample.ogg" preload="none"></audio>  </a>

p.s: future, when see similar chunks of code provided one, it's clear sign same can improved , minimized essential.


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more