audio player custom

by Евгений

HTML

<div ng-app="app" ng-controller="myCtrl">
<div>
    <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
    <span class="_play" ng-click="play($event)"></span>
    <span class="_pause" ng-click="pause($event)"></span>
</div>
<div>
    <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
    <span class="_play" ng-click="play($event)"></span>
    <span class="_pause" ng-click="pause($event)"></span>
</div>
</div>

CSS

._play, ._pause {
    display: inline-block;
    height: 30px;
    width: 30px;
    background: linear-gradient(to bottom, rgba(0,0,0,.84) 0%,rgba(0,0,0,.54) 100%);
    position: relative;
    cursor: pointer;
}
._play:after {
    display: block;
    position: absolute;
    left: 12px;
    top: 5px;
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-left: 10px solid white;
    content: '';
}
._pause {
    display: none;
}
._pause:after {
    display: block;
    position: absolute;
    left: 8px;
    top: 6px;
    height: 20px;
    width: 5px;
    border-right: 5px solid white;
    border-left: 5px solid white;
    content: '';
}
._active ._play {
    display: none;
}
._active ._pause {
    display: inline-block;
}

JavaScript

angular.module('app', [])
        .controller('myCtrl', ['$scope', function($scope) {

   $scope.pause = function(e){
       var audioWrap = e.target.parentNode;
       audioWrap.classList.remove('_active');
       audioWrap.querySelector('audio').pause();
   }
   $scope.play = function(e){
       var audioWrap = e.target.parentNode;
       audioWrap.classList.add('_active');
       audioWrap.querySelector('audio').play();
   }
}])