Air horn to your hearts content.

<air-horner></air-horner>

There are two ways.

1. <link rel="import" href="air-horner.html">
2. <script src="air-horner.js"></script> — my preferred method.

The element name is already defined in the script as <air-horner>.

The :host is an inline-block element that has a default dimensions of 100px x 100px. You can override this by specifiying your own width and height.

<style>
  air-horner {
    width: 300px;
    height: 300px;
  }
</style>
<air-horner></air-horner>

Yes. The element exposes a couple of properties and methods that you can use to interact with the <air-horner> element.

• element.start()
• element.stop()

All attributes are managed as DOM Attributes, updating the value on the object will update it on the element and likewise from the DOM Element to the object.

• src — A reference to the media element that will be played.
• loopStart — The start point for the looping in SS.MMMM format
• loopEnd — The end point for the looping in SS.MMMM format

Yes and no. There are no styling extension for the default airhorn elements in the ShadowDOM. You do have the ability to provide your own element using <slot> projection.

When the element is in horning state, a class name of horning will be applied to the root of the element.

<air-horner id="jakehorner" src="test/sounds/yo.mp3" 
            loopStart="0.616" loopEnd="1.078" style="display:block;">
 <style>
  .head .face, .head .mouth {
    position:absolute;
  }

  .head {
    position: relative;
  }

  @keyframes jaking {
    0% {
      transform: translate(0, 8px);
    }
    100% {
      transform: translate(0, 12px);
    }
  }

  #jakehorner.horning .mouth {
    animation-name: jaking;
    -webkit-animation-name: jaking;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    animation-duration: 10ms;
    animation-delay: 200ms;
    transform: translate(0, 10px) .2s cubic-bezier(.4, 0, 1, 1);
  }
 </style>
 <div class="head">
  <img class="face" src="test/images/jakehead.png">
  <img class="mouth" src="test/images/jakemouth.png">
 </div>
</air-horner>

Yes. You can change the src attribute on the element. Note, if you want the audio to loop you need to define a loopStart and loopEnd attribute. Finding a good loop point is left to the reader ;)

<air-horner src="test/sounds/yo.mp3" loopStart="0.616" loopEnd="1.078"></air-horner>

By default the airhorn.mp3 is used.

Yes. By setting the loopStart and loopEnd attributes you can control where the looping occurs. Be careful though, you need to be careful of audio clipping.

Not yet.