6 Replies - 316 Views - Last Post: 02 October 2017 - 01:20 AM

#1 Reivaxor  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 13-September 17

How to make play/stop audio button HELP

Posted 22 September 2017 - 11:19 AM

hi, i want to make a Play and Pause <audio file> button but i really cant figure out how to do it,help!

please have a look at these pictures
https://imgur.com/nTfsWeT
https://imgur.com/frk0goL

<!DOCTYPE html><html><head><style>
.menu li span{border: 1.8px solid #a3a3a3;
width:64px;height:35px;
   font-size: 15px;
   font-weight: 600 ;
    padding: 8px;
    border-radius: 1px ;
    margin-bottom: 26px;
    background: linear-gradient(#515151,#2d2d2d);
    color: #ffffff;
    float: left;
    margin-right:   4px;}

.menu li span:active {
	background: #fff;
background: linear-gradient(#383838,#6b6a6a) ;
	box-shadow: 0 -6px 0 #000, inset1px 2px 0  1px #f7b58f ;
	top: 144.31px ;}

</style>
</head>
<body>

<div class="header">
</div>

<div class="clearfix">
  <div class="column menu">
    <ul class="containerMenu">
    
                
              
      <li id="m1"><a href="google.com">
       
 <span>Play</span></a>
      
      
      
   </ul> </div>
</div></body></html>


ok here you can try this code - https://www.w3school....tryhtml5_audio

Is This A Good Question/Topic? 0
  • +

Replies To: How to make play/stop audio button HELP

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6374
  • View blog
  • Posts: 25,755
  • Joined: 12-December 12

Re: How to make play/stop audio button HELP

Posted 23 September 2017 - 12:55 AM

Your code does not even have an audio element. You must demonstrate some effort towards your goal.



Code from w3schools is:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p><strong>Note:</strong> The audio tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

This code also demonstrates some sensible formatting/ indenting, which you should follow.
Was This Post Helpful? 0
  • +
  • -

#3 Reivaxor  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 13-September 17

Re: How to make play/stop audio button HELP

Posted 23 September 2017 - 02:02 AM

hi thanks for reply, i found someone who helped me complete the Button,
but i dont know how to use it. i tried copy the html/css to my website post and Put the other files into my Wordpress directory
my button doesnt play anything, can someone help me.

i just dont know how to use the code inside the zip im so confused.

-----original Massage and File download < 4mb >-----

a person:
Hi,Check out the link to the zip file which contains a fully working example.

http://www.mediafire...he5o/EllenG.zip
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6374
  • View blog
  • Posts: 25,755
  • Joined: 12-December 12

Re: How to make play/stop audio button HELP

Posted 23 September 2017 - 02:08 AM

If the example is fully working then first extract the files and view the main page to confirm that it works.

Otherwise the most likely reason for failure within your site is that you've not placed files correctly. Your browser's dev tools will tell you this.

Otherwise, we need some details.
Was This Post Helpful? 0
  • +
  • -

#5 Reivaxor  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 13-September 17

Re: How to make play/stop audio button HELP

Posted 23 September 2017 - 02:43 AM

hi, i've uploaded the file to my site,i want to show this button on a single wordpress post ,im confused i'm not 100% sure what am i doing ,sorry im kinda new to coding haha.

https://imgur.com/2Gb6w1R
https://imgur.com/NvgV9Xc
Was This Post Helpful? 0
  • +
  • -

#6 Reivaxor  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 13-September 17

Re: How to make play/stop audio button HELP

Posted 01 October 2017 - 10:59 PM

Hi everyone, I know DiC. isn’t the place for wordpress issues, but i need a little help.

https://codepen.io/a...VMmKbE<---audio player

i want to use the audio player from codepen into my wordpress post/pages.

After pasting the code , everything works fine just the button doesn’t play.
Please view the pictures below thanks
Posted Image
Posted Image
Posted Image

https://codepen.io/anon/pen/VMmKbE
link
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6374
  • View blog
  • Posts: 25,755
  • Joined: 12-December 12

Re: How to make play/stop audio button HELP

Posted 02 October 2017 - 01:20 AM

If the Javascript isn't working then check your browser's console for error messages.

Is there an indication as to what the issue is with the red wavy line? querySelectorAll is to select multiple elements, whereas #play refers to an id which must be unique. querySelector would make more sense, although the wavy line suggests that there might be something else going on at that point.

I'll move this to the Javascript forum.

Also, post the Javascript directly here in the forum, between code tags, not just images and external links.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1